Javascript 学习Ember.js-我将如何做到这一点？

为了学习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]
    },
    ...
];

标签数据：

...
{{#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]
    },
    ...
];

链接数据：

...
{{#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中设置模型不会更新链接列表。我也怀疑这是正确的做法

在余烬你会怎么做这样的事

编辑： 这就是你想要的吗？我对代码进行了注释，如果您有任何问题，请随时发表评论

---

祝你好运

你能用代码设置一个JSFIDLE吗？预配置的起点我设置了一个JSFIDLE。同时，您也可以在这里看到正在运行的应用程序：是的，我看到了，但是在一个站点中使用所有代码更适合回答您的问题……我添加了一个JS Bin。由于找不到托管副本，我一直在努力解决对Ember.js数据库的依赖性问题。我可以使用此功能，感谢您富有洞察力的回答。