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

Posted

技术标签:

【中文标题】Ember.js:让组件观察商店物品的值变化【英文标题】:Ember.js: let component observe value changes of store items 【发布时间】:2016-01-13 14:21:21 【问题描述】:

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

【问题讨论】:

【参考方案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

【讨论】:

我的组件包含 d3 代码。总体目标是在模型更改时更改我的 d3 可视化。我仍在研究 ember 是否是实现这一目标的正确框架。不幸的是,添加 hasDirtyAttributs 标志并没有帮助。 我的项目中有 d3。数据可以直接绑定——bar-chart data=graphData.data isLoaded=graphData.data noDataText=noData 谢谢,但我不明白这对我有什么帮助,因为我尝试组装原子'd3-elements'的组件。因此,我无法恢复到预构建组件。

以上是关于Ember.js:让组件观察商店物品的值变化的主要内容,如果未能解决你的问题,请参考以下文章

观察者如何找出 Ember.js 中被观察属性的前后值?

当 vuex 商店的值发生变化时,如何更新组件中的状态?

如何将观察者方法动态添加到 Ember.js 对象

如何让突变观察者检测文本区域的值变化?

Ember.js 使用路由器架构获取父路由的控制器

让商店倾听另一家商店的变化