alx*_*cms 16 handlebars.js ember.js
我正在使用Ember,我的视图在我的HTML DOM的最底部呈现,而不是在我的div元素内部.这是我的源代码:
index.html:
<body>
<div id="test">
<script type="text/x-handlebars">
{{view Skills.RecommendedSkillsListView}}
</script>
</div>
<script type="text/x-handlebars" data-template-name="recommended_skills_list">
<a href="#" {{action "b"}}>DO A NEW THING</a>
</script>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
</body>
Run Code Online (Sandbox Code Playgroud)
app.js:
Skills = Ember.Application.create({});
Skills.RecommendedSkillsListView = Ember.View.extend({
templateName: 'recommended_skills_list',
b: function(v) {
alert('new hello');
}
});
Skills.initialize();
Run Code Online (Sandbox Code Playgroud)
渲染文件:
<body class="ember-application">
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
<a href="#" data-ember-action="1">DO A NEW THING</a>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
注意:当使用与之前版本的ember(0.9.5)相同的代码时,它按预期工作
Lit*_*vis 22
啊,看起来它正在"追加你的视图"到你已经给出了Ember将寻找的'应用'模板名称的主体.为什么不尝试将div放在body中,然后在Ember.Application.create()中引用它?
Skills = Ember.Application.create({
rootElement: '#test'
});
Run Code Online (Sandbox Code Playgroud)
<body>
<div id="test"></div>
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/libs/handlebars-1.0.rc.1.js"></script>
<script src="js/libs/ember-1.0.0-pre.2.js"></script>
<script src="js/app.js"></script>
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
<a href="#" data-ember-action="1">DO A NEW THING</a>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
如果我错过了这一点,请告诉我;)
Cra*_*den 11
您需要使用应用程序的rootElement(此处的文档,相关问题:Emberjs rootElement)属性指定要呈现应用程序的元素:
Skills = Ember.Application.create({
rootElement: "#test"
});
Run Code Online (Sandbox Code Playgroud)
这是一个工作示例:jsfiddle示例
从示例中渲染输出:
<body>
<div id="test" class="ember-application">
<div id="ember135" class="ember-view">
<div id="ember140" class="ember-view">
<a href="#" data-ember-action="1">DO A NEW THING</a>
</div>
</div>
</div>
</body>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
2991 次 |
| 最近记录: |