聚合物 - dom 内的双向绑定 - 重复

Question

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

我在这里尝试使用模板 repeate 通过输入一个对象 controlButtons 来生成纸质按钮，这在生成带有 name[ 的按钮方面效果很好=27=] 和 id。但是 disabled 绑定不起作用，而且点击侦听器也没有通过这种方法注册。

我的问题是，这是正确的做法吗？或者，无法在 Polymer 中添加此类绑定。

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>   </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

根据这个答案，这是不可能的： How can i bind a dynamic function within a polymer component?

所有按钮都需要调用相同的 "main" 方法。

您可以将按钮相关的功能单独存储在属性"calls_method"中，如：

name: "A", id: "buttonA", calls_method: "buttonAClick",...

然后在 "main" 单击方法中获取 "calls_method" 值，并基于该值进行调用。那里可以用变量名调用JS函数，如：

var method = e.target.attributes.calls_method.value;
method();

Answer 2

作为，这不是立即可行的，但可以使用 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>

聚合物 - dom 内的双向绑定 - 重复

Polymer - two way binding inside dom-repeat

javascript

polymer

polymer-1.0