0
是否有可能實現此類功能？說我有一個元素我-element.html聚合物 - dom-repeat內部的雙向綁定
在這裏，我試圖用模板repeate飼餵對象controlButtons，它與名生成按鈕能很好地產生紙按鈕和id。但已禁用綁定不起作用，並且此方法也未註冊點擊式偵聽器。
我的問題是，這是做這件事的正確方法嗎？或者，不可能在聚合物中添加這種類型的結合。
P.S.-這是一個樣本的例子，但在我的應用程序有很多按鈕和元素，所以我想利用爲目的的模板中繼。
<dom-module id="my-element">
<template>
<div id="top_container" class="layout vertical center-justified">
<div id="controls" class="horizontal layout">
<template is="dom-repeat" items="{{controlButtons}}" as="button">
<paper-button id="{{button.id}}" class="button" on-click={{button.onClickBinding}} disabled$="{{button.disableBinding}}" raised>{{button.name}}</paper-button>
</template>
<!-- Commented temporarily for template test -->
<!--<paper-button id="start_button" class="button" on-click="buttonAClick" disabled$="{{__computeDisabling(1, controlFlag2, controlFlag1)}}" raised>A</paper-button>
<paper-button id="stop_button" class="button" on-click="buttonBClick" disabled$="{{__computeDisabling(2, controlFlag2, controlFlag1)}}" raised>B</paper-button>
<paper-button id="clear_button" class="button" on-click="buttonCClick" disabled$="{{__computeDisabling(4, controlFlag4, controlFlag1)}}" raised>C</paper-button>
<paper-button disabled$="{{__computeDisabling(6, controlFlag4, controlFlag1, disableSave)}}" class="button" on-click="buttonDClick" raised>D</paper-button>
<paper-button id="import_button" class="button" on-click="buttonEClick" disabled$="{{__computeDisabling(5, '', controlFlag2)}}" raised>E</paper-button>-->
</div>
</div>
</template>
<script>
Polymer({
is: "my-element",
properties: {
controlFlag1: {
type: Boolean,
value: false,
notify: true
},
controlFlag2: {
type: Boolean,
notify: true,
value: false
},
controlFlag3: {
type: Boolean,
value: false
},
controlFlag4: {
type: Boolean,
value: true,
notify: true
},
controlButtons: {
type: Object,
value: [{name: "A", id: "buttonA", onClickBinding: "buttonAClick", disableBinding: "{{__computeDisabling(1, controlFlag2, controlFlag1)}}"},
{name: "B", id: "buttonB", onClickBinding: "buttonBClick", disableBinding: "{{__computeDisabling(2, controlFlag2, controlFlag1)}}"},
{name: "C", id: "buttonC", onClickBinding: "buttonCClick", disableBinding: "{{__computeDisabling(4, controlFlag4, controlFlag1)}}"},
{name: "D", id: "buttonD", onClickBinding: "buttonDClick", disableBinding: "{{__computeDisabling(6, controlFlag4, controlFlag1, controlFlag3)}}"},
{name: "E", id: "buttonE", onClickBinding: "buttonEClick", disableBinding: "{{__computeDisabling(5, '', controlFlag2)}}"}]
}
},
created: function() {},
ready : function() {},
buttonAClick: function() {
console.log("A button clicked!");
},
buttonBClick: function() {
console.log("B button clicked!");
},
buttonCClick: function() {
console.log("C button clicked!");
},
buttonDClick: function() {
console.log("D button clicked!");
},
buttonEClick: function() {
console.log("E button clicked!");
},
__computeDisabling: function(call, flag1, flag2, flag3) {
switch (call) {
case 1:
return !flag1 || flag2;
case 2:
return !flag1 || !flag2;
case 3:
return !flag1 || !flag2;
case 4:
return flag1 || flag2;
case 5:
return flag2;
case 6:
return flag1 || flag2 || flag3;
case 7:
return !flag2;
}
},
});
</script>
感謝soultion點擊事件，但如何處理殘疾人$ = 「{{button.disableBinding}}」 – Roy
你說得對，我錯過了那部分。我編輯了答案，使其工作。我的方法是爲項目使用不同的數據結構（請參閱代碼示例）。 – LeBird
感謝您的方法，我做的一個更改是將_computeDisabling綁定方法（如** _ computeDisabling（deviceReady，monitoringStarted，isChartEmpty，button）**）中的所有controlFlags作爲參數傳遞。否則，如果標誌值被改變，動態綁定不會發生。 – Roy