Polymer - two way binding inside dom-repeat

Question

Is it possible to acheive something of this sort. Say I have an element my-element.html

Here I am trying to use template repeate to generate paper-buttons by feeding an object controlButtons, which works well in generating the buttons with the name and id. But the the disabled binding is not working and also the on-click listeners are not registered by this approach.

My question is, is this the right way of doing it ? Or, is not possible to add such type of bindings in Polymer.

P.S.- This a sample example, but in my app there are lot of buttons and elements and hence I am trying use a template repeater for the purpose.

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

score 3 · Accepted Answer · edited May 23 '17 at 10:32

As Goce Ribeski said, it's not immediately possible, but it's possible to use Polymer's data model.

Edit

The disabling button should be done differently. I would add the flags as object properties and then decide in the _computeDisabled method if the button should be disabled or not. Sidenote: You don't need the $ for the disabled attribute because <paper-button> is a custom element.

Here's a full example based on your code:

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

thanks for the soultion for click event, but how to handle disabled$="{{button.disableBinding}}" — Roy, Nov 10 '16 at 11:34
You're right, I missed that part. I've edited the answer to make it work. My approach would be to use a different data-structure for the items (see code example). — LeBird, Nov 10 '16 at 13:02
thanks for the approach, one change which I did is to pass all the controlFlags as agruments in the _computeDisabling binding method like **_computeDisabling(deviceReady, monitoringStarted, isChartEmpty, button)**. Else, the dynamic binding does not happen if the flag values are changed .. — Roy, Nov 11 '16 at 08:56
and removed the flags array from the button objects keeping only the "call" key for identifying the proper case — Roy, Nov 11 '16 at 09:12

score 0 · Answer 2 · edited May 23 '17 at 12:34

Based on this answer it's NOT possible: How can i bind a dynamic function within a polymer component?

All the buttons will need to call the same "main" method.

You can store the button related function in a separate property "calls_method", as:

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

Then in the "main" on-click method get that "calls_method" value, and based on that make call. JS function call by variable name can be used there, as:

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

Polymer - two way binding inside dom-repeat

2 Answers2