javascript - Polymer - two way binding inside dom-repeat -

is possible acheive of sort. have element my-element.html

here trying use template repeate generate paper-buttons feeding object controlbuttons, works in generating buttons name , id. the disabled binding not working , on-click listeners not registered approach.

my question is, right way of doing ? or, not possible add such type of bindings in polymer.

p.s.- sample example, in app there lot of buttons , elements , hence trying use template repeater 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 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> 

as goce ribeski said, it's not possible, it's possible use polymer's data model.

edit

the disabling button should done differently. add flags object properties , decide in _computedisabled method if button should disabled or not. sidenote: don't need $ disabled attribute because <paper-button> custom element.

here's full example based on 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']}]          }        },        // magic: use function name in module's namespace.        _handlebuttonclick: function(e) {          this[e.model.button.onclickbinding]();        },        // disable 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];            // 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>