0

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

編集: http://jsbin.com/Ovuw/81/edit

4

1 に答える 1