在我嘗試更新到聚合物1.0我得到了以下問題的數據綁定:聚合物1.0 DOM的重複綁定數組
我高分子0.5的webapp使用重複,模板來生成複選框某些類別。所有checked
值都以類別ID作爲關鍵字綁定到數組(sortedCatsArray
)。下面是更新部分聚合物1.0我第一次嘗試,但它不工作...
<template is="dom-repeat" items="{{sortedCatsArray}}" as="category">
<paper-checkbox for category$="{{category.id}}" checked="{{filterChkboxes[category.id]}}"></paper-checkbox>
</template>
正如你可以在docs閱讀,這是不可能再結合同方陣列的性能 - 方括號(現在的方式:object.property
)。任何人都可以告訴我是否仍然可以將所有生成的複選框值綁定到一個數組中?
更新#1
正如你可以在docs讀,陣列的具有約束力的指標,不支持。所以我試圖從文檔中爲我的案例使用該示例,並編寫了以下代碼。如果我運行此代碼,它似乎按預期工作:檢查第一個和第三個複選框。但我也希望如果手動檢查/取消選中複選框,數組將被更改。這不會發生,只有當我改變數組(在ready
- 函數)的複選框選中得到...
<dom-module id="my-index">
<link rel="import" type="css" href="/css/index.css">
<template>
<template is="dom-repeat" items="{{sortedCatsArray}}" as="category">
<paper-checkbox for category$="{{category.id}}" checked="{{arrayItem(filterChkboxes.*,category.id)}}" on-change="test"></paper-checkbox>
</template>
</template>
</dom-module>
<script>
Polymer({
is: "my-index",
properties: {
filterChkboxes: {
type: Array,
notify: true,
observer: "filterChkboxesChanged",
value: function(){return[true,false,true,false];}
},
sortedCatsArray: {
type: Array,
value: function(){return[{id: 0}, {id: 1},{id: 2},{id: 3}]},
notify: true
},
},
ready: function(){
this.set('filterChkboxes.1',true);
},
test: function(){
console.log(this.filterChkboxes);
},
observers: [
'filterChkboxesChanged(filterChkboxes.*)'
],
arrayItem: function(array, key){
return this.get(key, array.base);
},
filterChkboxesChanged: function(changes){
console.log(changes);
},
});
</script>
你有這樣的工作示例嗎?我認爲,'checked'屬性綁定到大括號內的屬性。所以計算出來的屬性應該返回一個變量,在該變量中存儲'checked'狀態。這不正確嗎?但是這在我的嘗試中不起作用... – Jokus
是的。發佈一個簡單但完整的版本,您正在嘗試並且無法正常工作,因此更容易讓某人發現問題。另外,請仔細看看[這裏](https://www.polymer-project.org/1.0/docs/migration.html#attribute-bindings)和[這裏](https://www.polymer-project.org /1.0/docs/devguide/data-binding.html#attribute-binding)。 –
好的,請看看更新後的問題;) – Jokus