示例：http://jsfiddle.net/qonrthk1/6/
<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/libiron-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-icons/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://raw.githubusercontent.com/PolymerElements/iron-selector/iron-selectable.html">
<link rel="import" href="https://raw.githubusercontent.com/PolymerElements/iron-selector/iron-selection.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-item/paper-item-shared-styles.html">
<link rel="import" href="https://cdn.rawgit.com/download/polymer-cdn/1.1.3/lib/paper-button-behavior/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={{_working.data}}></paper-toggle-button>
<span>{{_working.label}}</span>
<span>{{computeBooleanToString(_working.data)}}</span>
</div>
<paper-item>{{_workingItem}}</paper-item>
<template is="dom-repeat" items="{{_toArray(_notWorking)}}">
<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>
<paper-item>{{_notWorkingItem}}</paper-item>
</template>
<script>
(function () {
Polymer({
is: 'pingo-toggle',
properties: {
_workingItem: {
type: String,
notify: true,
value: "placeholder"
},
_notWorkingItem: {
type: String,
notify: true,
value: "placeholder"
},
_working: {
type: Object,
notify: true,
value: {
label: "Working Toggle",
data: true
}
},
_notWorking: {
type: Object,
notify: true,
value: {
a: {
checked: true
},
b: {
checked: false
}
}
},
},
_newItemObserved: function (newValue, oldValue) {
this._value = JSON.parse(JSON.stringify(newValue));
},
// Observers
/////////////////////////////////////////////////////////
observers: ['_notWorkingValueChanged(_notWorking.*)', '_workingValueChanged(_working.*)'],
// Smart check. only fire if we change state.
_workingValueChanged: function (changeRecord) {
var thisElement = this;
this._workingItem = this.computeBooleanToString(this._working.data) + Math.random();
console.log("Working" + changeRecord.path);
},
_notWorkingValueChanged: function (changeRecord) {
var thisElement = this;
this._notWorkingItem = "_notWorkingItem fired" + Math.random();
console.log("notWorking:" + changeRecord.path);
},
computeBooleanToString: function (a) {
return a === true ? 'true' : 'false';
},
_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;
}
});
})();
</script>
我看到的问题是，当我有一个dom-repeater，我将一个对象转换为一个数组时，它似乎没有正确地绑定到paper-toggle-button值。 在我的jsFiddle中，你可以看到一个工作简单的纸张切换按钮，并且当它在转发器内时不起作用。
目标 ：我尝试检测dom-repeater内发生的切换更改。
预计 ：我希望在切换时更改this._notWorking.a.checked和this._notWorking.b.checked。
我的观察员 观察员：[＆＃39; _notWorkingValueChanged（_notWorking。）＆＃39;，＆＃39; _workingValueChanged（_working。）＆＃39;]，
_notWorkingValueChanged永远不会被触发。
这个例子非常小，所以希望这是一个明显的问题。
由于
答案 0 :(得分：1)
将_notWorking的计算值移出dom-repeat：
<template is="dom-repeat" items="{{_notWorking}}">
并将其添加到您的属性定义中：
_notWorking: {
type: Object,
notify: true,
value: function() {
return this._toArray({
a: { checked: true },
b: { checked: false }
}); }
},