我如何观察聚合物中的亚物业变化？

Question

For this object: 对于此对象：

obj = {
        a:'a value',
        b:'b value'
      }

I need to call a function whenever a 's or b 's value is changed. 每当a或b的值更改时，我都需要调用一个函数。 I saw Observe changes for an object in Polymer JS , but that solution is not working for me. 我在Polymer JS中看到了观察对象的更改，但是该解决方案对我不起作用。

I tried unsuccessfully to add an observer like this: 我尝试添加如下观察者失败：

 observers: [
    'abc(obj.*)' //abc is function which need to be called
 ]

and: 和：

 observe: {
    'obj.a': 'abc'     // here I'm observing a's attribute
 },

Plunker: http://plnkr.co/edit/BvX25wJHJh7i2aeyVBks?p=preview 柱塞： http ：//plnkr.co/edit/BvX25wJHJh7i2aeyVBks？p = preview

Answer 1

In your Plunker, the observer is not called after the changes to obj.a in your ready() callback because the subproperty was directly assigned, which does not automatically fire a change-event for observers (or data bindings) to see. 在您的Plunker中，在对ready()回调中的obj.a进行更改之后，不会调用观察者，因为直接分配了该子属性，该子属性不会自动触发更改事件供观察者（或数据绑定）查看。 Here's the corrected plunker . 这是校正过的矮人。

Polymer docs describe how to observe subproperty changes : Polymer文档描述了如何观察子财产变化：

In order for Polymer to properly detect the sub-property change, the sub-property must be updated in one of the following two ways: 为了使Polymer正确检测子属性更改，必须以以下两种方式之一更新子属性：

Via a property binding . 通过属性绑定。

By calling set . 通过调用set 。

There's also a third way: by calling notifyPath . 还有第三种方法：通过调用notifyPath 。

After making changes to this.obj.a , you can notify observers and update bindings by calling this.notifyPath('obj.a', this.obj.a) : 对this.obj.a进行更改this.obj.a ，您可以通过调用this.notifyPath('obj.a', this.obj.a)通知观察者并更新绑定：

this.obj.a = 100;
this.obj.a++;
this.notifyPath('obj.a', this.obj.a);

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { obj: { type: Object, value: () => ({a: 1, b: 2}) } }, observers: [ '_objChanged(obj.a, obj.b)' ], _objChanged: function(a, b) { console.log('a', a, 'b', b); }, _doNotifyPath: function() { this.obj.a++; this.obj.b++; this.notifyPath('obj.a', this.obj.a); this.notifyPath('obj.b', this.obj.b); } }); });

 <head> <base href="https://polygit.org/polymer+1.11.3/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <div>obj.a = [[obj.a]]</div> <div>obj.b = [[obj.b]]</div> <button on-tap="_doNotifyPath">Notify Path</button> </template> </dom-module> </body>

Alternatively, you could combine the setting and notification with this.set('obj.a', 'new value') : 或者，您可以将设置和通知与this.set('obj.a', 'new value') ：

this.set('obj.a', this.obj.a + 1);

 HTMLImports.whenReady(() => { Polymer({ is: 'x-foo', properties: { obj: { type: Object, value: () => ({a: 1, b: 2}) } }, observers: [ '_objChanged(obj.a, obj.b)' ], _objChanged: function(a, b) { console.log('a', a, 'b', b); }, _doSet: function() { this.set('obj.a', this.obj.a + 1); this.set('obj.b', this.obj.b + 1); } }); });

 <head> <base href="https://polygit.org/polymer+1.11.3/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <div>obj.a = [[obj.a]]</div> <div>obj.b = [[obj.b]]</div> <button on-tap="_doSet">Set</button> </template> </dom-module> </body>

codepen 码笔

我如何观察聚合物中的亚物业变化？

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-12-10 09:47:22

我如何观察聚合物中的亚物业变化？

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-12-10 09:47:22

解决方案1
2 已采纳 2016-12-10 09:47:22