Ember.js:让组件观察商店商品的价值变化

时间:2015-10-15 08:11:34

标签: javascript ember.js components store

我刚刚开始使用Ember并遇到了以下问题。我想观察商店内商品的价值是否有变化。据我所知,这就是@each指令的用途。不幸的是,这不会触发我的组件中的相应方法。

我的代码结构如下。 当前路由返回我的商店的子集,并具有更改其中一个项目的操作。

export default Ember.Route.extend({
    model: function() {                                                                                                                 
        this.store.push('node', {id: 1, x: 40, y:40});
        this.store.push('node', {id: 3, x: 50, y:50});
        return this.store.findAll("node");
    },
    actions: {
        move: function(x, y) {
            this.store.findRecord('node', 1).then(
                function(v) {
                    v.set("x", x); v.set("y", y);
                });
        }
    }   
});

我通过模板指令将模型传递给我的组件。

{{node-comp data=model}}

现在,我希望在模型中的值发生变化时(即在我的示例中调用动作'move'),在组件内获得通知。我目前的方法如下:

export default Ember.Component.extend({
    rerender: function() {
        console.log("rerender called");
    }.observes("data.@each")
};

我也尝试了'data。[]'指令和'data。@ each.x'指令。但没有任何事情导致了理想的行为。请注意,组件的模板会被通知,即模型项目列表在“移动”调用后获得更新。

我的'ember -v'输出

  

Ember CLI的未来版本不支持v4.2.0。请更新到节点0.12或io.js.   版本:1.13.8找不到守望者,回到NodeWatcher   用于文件系统事件。访问   http://www.ember-cli.com/user-guide/#watchman了解更多信息。节点:   4.2.0 npm:2.13.4 os:linux x64

1 个答案:

答案 0 :(得分:0)

您可以尝试使用" hasDirtyAttributes"属性。我不确定在按{x:1}对象时是否适用。为什么不使用 store.createRecord(' node',{x:1})等。

http://emberjs.com/api/data/classes/DS.Model.html#property_hasDirtyAttributes

rerender: function() {
        console.log("rerender called");
    }.observes("data.@each.hasDirtyAttributes")

NB!这对异步关系不起作用

顺便说一下,这种渲染看起来很奇怪。

您的组件包含哪些内容?在模型更改后,它看起来很奇怪,您可以在组件中直接绑定模型值。     组件/ file.js

{{#each data as |node|}}
  {{node.x}} < changes when node changes
{{/each}}