2017-11-22 8 views
0

ポリマーにサンプルプログラムを作成しています。 I以下に示すようにテンプレートを持っている:Polymer:checkedプロパティの変更後にチェックボックス要素が更新されない

<template is="dom-repeat"> 
 
    <li class="clearfix title-container"> 
 
     <input type="checkbox" checked="{{item.checked::change}}" class="checkbox-container float--left" /> 
 
     <label class="label-container">{{item.id}}</label> 
 
    </li> 
 
</template>

(F1キーをその機能はクリックで下図のように、私がボタンを持っているが)と呼ばれている:

<button on-click="f1">Save</button>

最初はすべてのチェックボックスがチェックされています。ユーザーがチェックボックスをオフにして、ボタンをクリックすることがあります。 f1()は、ユーザーによってチェックされたすべての要素を収集します。 f1を実行した後、すべてのチェックボックスをもう一度チェックします。以下

//Collect all the selected items in a separate array. 
 
//Revert unchecked checkboxes to checked. 
 
f1: function() { 
 
    newIndex = 0; 
 
    for (index = 0; index < this.dataArray.features.length; index++) { 
 
    if (this.dataArray.features[index].checked) { 
 
     this.newDataArray.selectedElements[newIndex++] = this.dataArray.features[index]; 
 
    } else { 
 
     this.dataArray.features[index].checked = true; 
 
    } 
 
    } 
 
}

がdataArray要素の定義である(私はコンソールでそれを印刷):F1のためのコードは、()を以下に示す

//The dataArray when printed in a console 
 
{ 
 
    type: "FeatureCollection", 
 
    features: Array(4) 
 
} 
 
features: Array(4) 0: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
1: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
2: { 
 
    type: "Feature", 
 
    checked: true 
 
} 
 
3: { 
 
    type: "Feature", 
 
    checked: true 
 
}

私が直面している問題は、f1()がc heckedプロパティは、チェックする配列のすべての値を割り当ててもUIに反映されません。私はサブプロパティが直接反映されていないことを読んだが、ここでnotifyPath()をどのように使うのか、または配列の突然変異メソッドをどのように使うのか分からない。どんな助けもありがとうございます。

答えて

0

配列の突然変異の方法を使用する必要があります。ポリマーは配列の変更について気付かないので、notifyPathに電話するか、array mutation methodsを使用するだけです。

関連する問題