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>


Comments

Post a Comment

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

i using winscp .net assembly uploading files. want upload multiple files asynchronous way. have created method works single upload. public class uploadingdata { private sessionoptions _sessionoptions; private session _session; //connection etc private void onconnected() { foreach (var fileinfo in localfileslist) { var task = task.factory.startnew(() => uploadfilesasync(fileinfo)); } } private async task uploadfilesasync(string file) { string remotefilepath = _session.translatelocalpathtoremote(file, @"/", "/test_data_upload"); var uploading = _session.putfiles(file, remotefilepath, false); //when done await task.run(() => thread.sleep(1000)); } } please suggest me correct way. thanks you can use backgroundworker class this: string[] images = new string[50]; foreach (var path in images) { backgroundworker
Read more

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more