gal*_*ans 1 javascript ember.js
使用Handlebars我可以这样做:
<script type="text/x-handlebars" data-template-name="index">
<table>
{{#each model as |item index|}}
<tr {{action 'update' index}}>
{{#each col in columns}}
<td>{{dd item col}}</td>
{{/each}}
</tr>
{{/each}}
</table>
</script>
App = Ember.Application.create();
App.IndexRoute = Ember.Route.extend({
model: function() {
return [
{ name: "Joe", description: "Good guy", age: 15 },
{ name: "Moe", description: "Bad guy", age: 25 },
{ name: "Dude", description: "Some other guy", age: 65 }
];
}
});
App.IndexController = Ember.ArrayController.extend({
columns : ['age', 'name', 'description'],
actions: {
update: function(index) {
var item = this.get('model')[index];
Ember.set(item, 'age', 10);
}
}
});
Ember.Handlebars.registerBoundHelper('dd', function(item, column) {
return item[column];
}, 'age', 'name', 'description');
Run Code Online (Sandbox Code Playgroud)
这会绑定模型中每个项目的年龄,名称和描述属性,以便更改age属性更新模板.
但是现在HTMLBars是默认的,我不能这样做,因为似乎makeBoundHelper没有像HandleBars那样的dependentKeys参数.此帮助程序可以使对象正常,但在数据更改时不会更新:
App.ddHelper = Ember.HTMLBars.makeBoundHelper(function(params) {
var item = params[0];
var column = params[1];
return item[column];
}, 'age', 'name', 'description');
Ember.HTMLBars._registerHelper('dd', App.ddHelper);
Run Code Online (Sandbox Code Playgroud)
那么如何通过模板中的任意键访问对象的属性并使用HTMLBars绑定这些属性?