我正在尝试将 Polymer 属性绑定(bind)到 CheckBox 的禁用属性，但是 CheckBox 只能在开始。
我必须提到，我绑定(bind)的属性是 Polymer 属性的子属性。
组件代码:
<link rel="import" href="../polymer/polymer.html"/>
<dom-module id="checkbox-disabled-example">
<template>
<button
on-click="onClick" >
Toggle Disabled Enabled </button>
<template is="dom-repeat" items="{{elementsObject.items}}" as="item">
<input
type="checkbox"
disabled$="{{item.disabled}}" >
{{item.name}} <br>
</template>
</template>
<script>
Polymer({
is: 'checkbox-disabled-example',
properties:{
elementsObject:{
type: Object,
value: {}
},
},
onClick: function(){
this.elementsObject.items.forEach(
function(item, index, array){
item.disabled = !item.disabled;
}
);
}
});
</script>
</dom-module>
index.html代码:
<body>
<template id="just-for-demo" is="dom-bind" >
<checkbox-disabled-example elements-object={{ckData}} >
</checkbox-disabled-example>
</template>
<script>
window.addEventListener('WebComponentsReady', function() {
var template = document.querySelector('template[is=dom-bind]');
var data =
{
items:
[
{ disabled: true, name:"Element 01"},
{ disabled: false, name:"Element 02"},
{ disabled: false, name:"Element 03"},
{ disabled: false, name:"Element 04"},
{ disabled: false, name:"Element 05"},
{ disabled: true, name:"Element 06"}
]
};
template.ckData = data;
});
</script>
</body>
如您所见，我创建了多个复选框，每个复选框都绑定(bind)到其项目的禁用属性。
当我点击按钮时，我切换了每个项目的禁用值，但是复选框状态没有改变。
我做错了什么？
最佳答案
强制改变对象或数组的变化是不可观察的。 如果您有一个简单的属性，例如:
this.name = 'Jane';
Polymer 会自动创建一个 setter，它会自动获取对该属性的任何更改。 但是，对对象子属性 或数组项 的更改将不起作用:
this.address.street = 'Elm Street';
不会调用地址 上的 setter ，也不会检测到更改。
Polymer 提供了对子属性和数组进行可见更改的特定方法，在上面的示例中，您需要调用:
this.set('address.street', 'Elm Street');
address.street 部分称为路径。它是一个字符串，用于标识与范围相关的属性或子属性。在大多数情况下，作用域是一个宿主元素。 如果要创建数组项的路径，则需要传递索引:
this.set('items.5', 'Changed index 5');
在您的特定示例中，对点击事件处理程序进行简单更改就足够了:
onClick: function() {
var that = this;
this.elementsObject.items.forEach(function(item, index, array) {
that.set('elementsObject.items.'+index+'.disabled', !item.disabled);
});
}
或者您可以使用很酷的新 ES6 箭头函数语法使其更具可读性并删除丑陋的 that = this:
onClick: function() {
this.elementsObject.items.forEach((item, index, array) => {
this.set('elementsObject.items.'+index+'.disabled', !item.disabled);
});
}
关于javascript - CheckBox 禁用属性绑定(bind)到 Polymer Property 的子属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39196574/