为了学习 Ember.js,我开始编写一个小型书签应用程序。带有所选标签的书签应显示在底部框中。
模板:
...
{{#each itemController="label"}}
<li>
<a href="#" {{bind-attr class=":label active:label-primary:label-default"}} {{action 'findLinks'}}>{{name}}</a>
</li>
{{/each}}
...
{{#each links}}
<li>{{name}}</li>
{{/each}}
...
应用程序标签控制器:
...
App.LabelController = Ember.ObjectController.extend({
needs: ["list"],
active: false,
actions: {
findLinks: function() {
var listController = this.get('controllers.list');
this.toggleProperty('active');
listController.set('model', this.get('store').find('link'));
}
}
});
...
标签数据:
App.Label = DS.Model.extend({
links: DS.hasMany('link'),
name: DS.attr('string'),
color: DS.attr('string')
});
App.Label.FIXTURES = [
{
id: 1,
name: 'Develop',
color: 'blue'
},
...
];
链接数据:
App.Link = DS.Model.extend({
labels: DS.hasMany('label'),
name: DS.attr(),
url: DS.attr()
});
App.Link.FIXTURES = [
{
id: 1,
name: 'Google',
url: 'http://google.com',
labels: [1]
},
...
];
我现在遇到的问题是在 LabelController 中设置模型不会更新链接列表。我也怀疑这是正确的方法。
你会如何在 Ember 中做这样的事情?
编辑:http: //jsbin.com/Ovuw/81/edit