使用Ember.js将新行动态插入到Table上下文中
Insert new line dynamically into a Table context, using Ember.js
我是Ember和Handlebars的新手。我正在尝试创建一个具有动态内容的表。我将代码添加到jsfiddle 中
我有以下代码:
<script type="text/x-handlebars">
<table border="1" bordercolor="FFCC00" style="background-color:FFFFCC" width="400" cellpadding="3" cellspacing="3">
{{#each Table.tableController}}
<tbody>
<tr>
<td width ="30%">{{title}}</td>
<td width ="30%">{{artist}}</td>
<td width ="40%">{{genre}}</td>
</tr>
</tbody>
{{/each}}
</table>
一个从我的控制器绑定内容的简单表。
这是我的控制器和应用程序:
Table = Ember.Application.create({});
Table.Cell = Ember.Object.extend({
title: null,
artist: null,
genre: null,
listens: 0
});
Table.tableController = Ember.ArrayProxy.create({
content: [],
init: function() {
var data = Table.Cell.create({
title: 'Ruby',
artist: 'Kaiser Chiefs',
genre: 'Indie Rock',
});
this.pushObject(data);
data = Table.Cell.create({
title: 'Somebody Told Me',
artist: 'Killers',
genre: 'Indie Rock',
});
this.pushObject(data);
},
createSong: function(title, artist, genre) {
var cell = Table.Cell.create({
title: title,
artist: artist,
genre: genre,
});
this.pushObject(cell);
},
});
这很好用。
现在我想添加一首新歌,我正在通过Chrome控制台添加以下行:
Table.tableController.createSong('Feiticeira', 'Deftones', 'Alternative');
我可以验证是否创建了一个新的Object并将其插入到我的内容数组中。但是我的桌子上没有零钱。
我做错了什么?为什么我的表没有创建新内容?
我把这段代码推到jsfiddle中是为了得到你的帮助。这是代码的链接。
更新分析
您忘记在init
中调用this._super();
,这使您的实例无法进行绑定管理设置。(固定修订版)
修复样本-仍然建议实施
更新了您的JSFiddle@http://jsfiddle.net/MikeAski/AgyAk/12/有一些改进(最值得注意的是:使用控制器而不是直接使用ArrayProxy
。它更惯用,可以切换到Router
基础设施)。
相关文章:
- 将函数的上下文应用于javascript变量
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 使用JQuery的动态上下文菜单
- 如何访问UIWebView'的子窗口上下文
- Jquery - table.row(tr) is undefined
- JQuery在单击正文时隐藏上下文菜单
- JQuery上下文菜单显示/隐藏问题
- 如何从HTTP上下文对象中获取Post数据
- HTML字符串作为上下文
- 为什么我的上下文选择器和.buttonset()在ie中花费了这么长时间
- 丢失对象“;这个“;方法中的上下文
- 防止在移动Safari(iPad/iPhone)中长按/长按默认上下文菜单
- d3防止在上下文菜单上触发mouseout
- 是否可以在不更改上下文的情况下调用函数.apply
- javascript, ajax, table, colour
- 调用$.each()函数时上下文发生变化
- jQuery parent() in table
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- Ember.js:将Em.$.getJSON转换为promise并将响应绑定到控制器上下文的正确方法