Question

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

在这里，我尝试使用模板重复来通过提供对象 controlButtons 来生成纸张按钮，这对于生成具有名称和的按钮很有效。 ID 即可。但是禁用绑定不起作用，并且此方法也未注册点击监听器。

我的问题是，这是正确的做法吗？或者，无法在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>

            <!-- 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方法中决定是否应禁用该按钮。 Sidenote ：对于disabled属性，您不需要$，因为<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>

Answer 2

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

所有按钮都需要调用相同的＆＃34; main＆＃34;方法

您可以将按钮相关功能存储在单独的属性＆＃34; calls_method＆＃34;中，如下：

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

然后在＆＃34; main＆＃34;点击方法得到＆＃34; calls_method＆＃34;价值，并基于该调用。可以在那里使用变量名称的JS函数调用，如：

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

聚合物 - dom-repeat内部的双向绑定

2 个答案: