Polymer 1.0观察者观察对象路径时不会触发，即使数据已更改
jsFiddle： 场景：父元素拥有一个数据对象。父元素将数据对象的一部分传递给绑定到对象中的值的子元素。当子对象更改值时，因为它们具有对象引用，所以数据将直接在父对象拥有的主数据对象中更改 问题：“_-toggleItemsChanged_-toggleItems.*”第一次激发一次，但即使_-toggleItems中的数据已更改，也不会再次激发 证明：在pingo toggle容器元素中 将断点置于_singleToggleChanged和_toggleItemsChanged。 两个都在启动时启动。 来回切换“hi:a”和“hi:b”。 什么都不会发生。 所以我把“hi:a”和“hi:b”都设置为True。 “Single Toggle”会触发，所以我会切换它，然后断点会命中。 对此进行评估。_切换项目； 嗯，你们两个都是真的。您可以将“hi:a”和“hi:b”切换为false，然后重新进行测试。现在它们都设置为false。 为什么不触发观察者：[“切换项更改了”切换项“，“单切换项更改了”单切换项“]，以进行数据更改Polymer 1.0观察者观察对象路径时不会触发，即使数据已更改,polymer,polymer-1.0,observers,Polymer,Polymer 1.0,Observers,jsFiddle： 场景：父元素拥有一个数据对象。父元素将数据对象的一部分传递给绑定到对象中的值的子元素。当子对象更改值时，因为它们具有对象引用，所以数据将直接在父对象拥有的主数据对象中更改 问题：“_-toggleItemsChanged_-toggleItems.*”第一次激发一次，但即使_-toggleItems中的数据已更改，也不会再次激发 证明：在pingo toggle容器元素中 将断点置于_singleToggleChanged和_toggleItemsChanged。 两个都在启
预期：我希望调用_-toggleItemsChanged函数时_-toggleItems.a.checked或_-toggleItems.a.checked的changeRecord.path。我不知道我是否能正确理解您的示例，但我相信您正在尝试观察更深层次的子属性更改。这行不通
观察家无法更深入地观察这一点。它们仅在使用时观察第一级属性的更改。如果你需要更深入，你需要观察其他路径，比如_toggleItems.a。等等。这很有道理，因为我也注意到了这一点。我可能不得不从孩子那里触发一个事件，以表明什么样的深层路径被改变了。
<script src="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/polymer/polymer.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/paper-styles.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/color.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-styles/default-theme.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-ripple/paper-ripple.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-behaviors/paper-inky-focus-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-checked-element-behavior/iron-checked-element-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-input/paper-input.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-button/paper-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-flex-layout/classes/iron-shadow-flex-layout.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-menu-button/paper-menu-button.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-behaviors/iron-control-state.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-behaviors/iron-button-state.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-icons/iron-icons.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-icon/iron-icon.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/iron-selector/iron-selector.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-item/paper-item.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-behaviors/paper-button-behavior.html">
<dom-module id="pingo-toggle">
<style>
.line {
margin-bottom: 40px;
}
.line span {
margin-left: 24px;
}
</style>
<template>
<div class="line">
<paper-toggle-button checked={{singleToggle.data}}></paper-toggle-button> <span>{{singleToggle.label}}</span>
<span>{{computeBooleanToString(singleToggle.data)}}</span>
</div>
<template is="dom-repeat" items="{{_workingArray}}">
<div class="line">
<paper-toggle-button checked={{item.value.data.checked}}></paper-toggle-button>
<span>{{item.value.label}}</span>
<span>{{item.value.id}}</span>
<span>{{computeBooleanToString(item.value.data.checked)}}</span>
</div>
</template>
</template>
<script>
(function() {
Polymer({
is: 'pingo-toggle',
properties: {
singleToggle: {
type: Object,
notify: true
},
toggleItems: {
type: Object,
notify: true,
observer: '_toggleItemsChanged'
},
},
_toggleItemsChanged: function(newValue, oldValue) {
if (this.toggleItems !== undefined) {
this._workingArray = this._toArray(this.toggleItems);
}
},
_toArray: function(obj) {
var index = 0;
var thisElement = this;
this._arrayData = Object.keys(obj).map(function(key) {
var id = "item_" + index;
++index;
var val = {};
val.data = obj[key];
val.label = "hi:" + key;
val.data = obj[key];
val.id = id;
val.original = obj.key;
return {
name: key,
value: val
};
});
return this._arrayData;
},
computeBooleanToString: function(a) {
return a === true ? 'true' : 'false';
}
});
})();
</script>
</dom-module>
<dom-module id="pingo-toggle-container">
<style>
</style>
<template>
<pingo-toggle single-toggle={{_singleToggle}} toggle-items={{_toggleItems}}></pingo-toggle>
<paper-item>{{_singleToggleHello}}</paper-item>
<paper-item>{{_toggleItemsHello}}</paper-item>
</template>
<script>
(function() {
Polymer({
is: 'pingo-toggle-container',
properties: {
_singleToggleHello: {
type: String,
notify: true,
value: "Well Hello There"
},
_toggleItemsHello: {
type: String,
notify: true,
value: "Hi there from many"
},
_singleToggle: {
type: Object,
notify: true,
value: {
label: "Single Toggle",
data: true
}
},
_toggleItems: {
type: Object,
notify: true,
value: {
a: {
label: "a Toggle2",
checked: true
},
b: {
label: "a Toggle2",
checked: false
}
}
}
},
// Observers
/////////////////////////////////////////////////////////
observers: ['_toggleItemsChanged(_toggleItems.*)', '_singleToggleChanged(_singleToggle.*)'],
// Smart check. only fire if we change state.
_singleToggleChanged: function(changeRecord) {
var thisElement = this;
this._singleToggleHello = this.computeBooleanToString(this._singleToggle.data) + Math.random() + changeRecord.path;
console.log("_singleToggle in pingo-toggle-container changed:" + changeRecord.path);
},
_toggleItemsChanged: function(changeRecord) {
var thisElement = this;
this._toggleItemsHello = "_workingToggleItemsChanged fired" + Math.random() + changeRecord.path;
console.log("pingo-toggle-container notWorking:" + changeRecord.path);
},
computeBooleanToString: function(a) {
return a === true ? 'true' : 'false';
},
ready: function(e) {
}
});
})();
</script>
</dom-module>
<pingo-toggle-container></pingo-toggle-container>