3
Polymerプロパティを無効な属性CheckBoxにバインドしようとしていますが、最初にCheckBoxが有効/無効になります。Polymerプロパティのサブプロパティにバインドされたチェックボックスの無効な属性
私がバインドするプロパティは、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>
あなたは、私はいくつかのチェックボックスを作成するのdisabledプロパティにバインドされ、それらの一つ一つを見ることができるようにその項目。
ボタンをクリックすると、チェックボックスの状態は変更されませんが、各アイテムの無効な値が切り替わります。
私は間違っていますか？
は、あなたが持っているTR 'dom-repeat'テンプレートの[' observe']（https://www.polymer-project.org/1.0/docs/api/dom-repeat）属性を使用していますか？例： '' –