Ember.js：让组件观察商店物品的值变化

Question

我刚开始使用 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}}

现在，我想在模型中的值发生更改时（即在我的示例中调用操作“移动”）在组件内获得通知。我目前的方法如下所示：

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。请更新到 Node 0.12 或 io.js。 版本：1.13.8 找不到守望者，回退到 NodeWatcher 用于文件系统事件。访问 http://www.ember-cli.com/user-guide/#watchman 了解更多信息。节点： 4.2.0 npm：2.13.4 操作系统：linux x64

Answer 1

您可以尝试使用“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")

注意！这不适用于异步关系

顺便说一句，这个重新渲染看起来很奇怪。

你的组件包含什么？模型更改后渲染看起来真的很奇怪，您可以在组件中直接绑定模型值。 组件/文件.js

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