javascript - polymer - dom-repeat 内的双向绑定(bind)

Question

有可能实现这样的目标吗？假设我有一个元素 my-element.html

在这里，我尝试使用模板重复来通过提供对象 controlButtons 来生成纸张按钮，该对象可以很好地生成具有 name 和 的按钮id。但是禁用绑定(bind)不起作用，而且这种方法也没有注册点击监听器。

我的问题是，这是正确的做法吗？或者，不可能在 Polymer 中添加此类类型的绑定(bind)。

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>

Answer 1

如Goce Ribeski said ，这不是立即可行的，但可以使用 Polymer 的数据模型。

编辑

禁用按钮应该以不同的方式完成。我会将标志添加为对象属性，然后在 _computeDisabled 中决定方法是否应禁用该按钮。 旁注:您不需要 $对于禁用属性，因为 <paper-button>是一个自定义元素。

这是基于您的代码的完整示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Handling</title>
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">
  <link href="paper-button/paper-button.html" rel="import">
</head>
<body>
<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}}" on-click="_handleButtonClick"
                        disabled="{{_computeDisabling(button)}}"
                        raised>{{button.name}}
          </paper-button>
        </template>
      </div>
    </div>
  </template>
  <script>
    Polymer({
      is: "my-element",
      properties: {
        controlButtons: {
          type: Object,
          value: [{name: "A", id: "buttonA", onClickBinding: "buttonAClick", call: 1, flags: ['controlFlag2','controlFlag1']},
            {name: "B", id: "buttonB", onClickBinding: "buttonBClick", call: 2, flags: ['controlFlag2','controlFlag1']},
            {name: "C", id: "buttonC", onClickBinding: "buttonCClick", call: 4, flags: ['controlFlag4','controlFlag1']},
            {name: "D", id: "buttonD", onClickBinding: "buttonDClick", call: 6, flags: ['controlFlag4','controlFlag1','controlFlag2']},
            {name: "E", id: "buttonE", onClickBinding: "buttonEClick", call: 8, flags: ['','controlFlag2']}]
        }
      },
      // some magic: use the function name in the module's namespace.
      _handleButtonClick: function(e) {
        this[e.model.button.onClickBinding]();
      },
      // disable the button, depending on it's flag properties.
      _computeDisabling: function(button) {
        var call, flag1, flag2, flag3;
        call = button.call;
        flag1 = button.flags[0];
        flag2 = button.flags[1];
        flag3 = button.flags[2];

        // your business logic goes here.
        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;
        }
      },

      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!");
      }
    });
  </script>
</dom-module>
<my-element></my-element>
</body>
</html>