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:
...
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 でそのようなことを行うにはどうすればよいでしょうか。