我仍在努力学习 ember.js,所以请多多包涵。
客观的
我目前正在创建一个单页 Web 应用程序。当应用程序时,应用程序将执行一个 ajax 调用,该调用将返回一个数字列表。应用程序将处理这些数字并为每个数字创建一个 div 并将其存储到一个 div 容器中。
每个 div 都会关联一个点击事件,因此当用户点击链接时,会弹出一个对话框。
代码
索引.html
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="payloads">
<div class="page">
<div id="desktopWrap">
<div id="theaterDialog" title="Theater View" class="bibWindow1">
{{view.name}}
{{#each item in model}}
<div {{bindAttr id="item"}} {{action click item}}>
<div class="thumb1" ></div>
<div class="userDetails1">Payload {{item}}</div>
<div class="online1" ></div>
</div>
<div class="spacer10"></div>
{{/each}}
</div>
</div>
</div>
</script>
我的 app.js 文件在这里:
App = Ember.Application.create();
App.Router.map(function() {
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
});
App.PayloadsRoute = Ember.Route.extend({
model: function() {
return ['Payload_1', 'Payload_2', 'Payload_3'];
}
})
App.IndexController = Ember.ObjectController.extend(
{
click: function(e)
{
alert("clicked:" + e);
}
})
大概的概念
上面的当前代码将创建具有 3 个 div 的“theaterDialogue”div 框。一个 onclick 动作通过控制器与每个 div 相关联。当用户单击第一个 div “payload 1”时,将在警报框中打印第二个 div “payload 2”等。我希望能够呈现一个新对话框(jquery 对话框),而不是打印出来内容将从模板呈现。我不清楚这是如何完成的……我知道视图用于存储模板的数据……但不知道如何将模板嵌套在由操作生成的模板中?
如果你能指点我,那就太棒了!
任何建议表示赞赏,D