ajax - Polymer iterate/repeat through multiple ironajax responses -
i want iterate through 2 arrays including data iron-ajax request.
the 2 repeats are:
<template is="dom-repeat" items="[[risknamesarr]]" as="risk"> <paper-listbox multi> <paper-material>{{risk}}</paper-material> </paper-listbox> </template> <template is="dom-repeat" items="[[riskworkflowstatearr]]" as="state"> <paper-listbox multi> <paper-material>{{state}}</paper-material> </paper-listbox> </template> the result then
{{risk1}} {{risk2}} {{risk3}} {{state1}} {{state2}} {{state3}} my issue want iterate through both arrays @ same time that:
{{risk1}} + {{state1}} {{risk2}} + {{state2}} {{risk3}} + {{state3}}
you use either computed property or computed binding.
computed property
// template <template is="dom-repeat" items="[[riskcombined]]"> <div>[[item.name]] + [[item.state]]</div> </template> // script polymer({ ... properties : { ... riskcombined: { computed: '_computeriskcombo(risknamesarr, riskworkflowstatearr)' } }, _computeriskcombo: function(risknamesarr, riskworkflowstatearr) { return risknamesarr.map( (x, i) => { return {"name": x, "state": riskworkflowstatearr[i]} }); } }); htmlimports.whenready(_ => { "use strict"; polymer({ is: 'x-foo', properties : { risknamesarr: { type: array, value: () => ['a','b','c'] }, riskworkflowstatearr: { type: array, value: () => [1,2,3] }, riskcombined: { computed: '_computeriskcombo(risknamesarr, riskworkflowstatearr)' } }, _computeriskcombo: function(risknamesarr, riskworkflowstatearr) { return risknamesarr.map( (x, i) => { return {"name": x, "state": riskworkflowstatearr[i]} }); }, ready: function() { this.async(() => this.risknamesarr = ['d','e'], 1000); } }); });<head> <base href="https://polygit.org/polymer+1.6.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <h4>computed property</h4> <template is="dom-repeat" items="[[riskcombined]]"> <div>[[item.name]] + [[item.state]]</div> </template> </template> </dom-module> </body>computed binding
// template <template is="dom-repeat" items="[[_computeriskcombo(risknamesarr, riskworkflowstatearr)]]"> <div>[[item.name]] + [[item.state]]</div> </template> // script polymer({ ... _computeriskcombo: function(risknamesarr, riskworkflowstatearr) { return risknamesarr.map( (x, i) => { return {"name": x, "state": riskworkflowstatearr[i]} }); } }); htmlimports.whenready(_ => { "use strict"; polymer({ is: 'x-foo', properties : { risknamesarr: { type: array, value: () => ['a','b','c'] }, riskworkflowstatearr: { type: array, value: () => [1,2,3] } }, _computeriskcombo: function(risknamesarr, riskworkflowstatearr) { return risknamesarr.map( (x, i) => { return {"name": x, "state": riskworkflowstatearr[i]} }); }, ready: function() { this.async(() => this.risknamesarr = ['d','e'], 1000); } }); });<head> <base href="https://polygit.org/polymer+1.6.0/components/"> <script src="webcomponentsjs/webcomponents-lite.min.js"></script> <link rel="import" href="polymer/polymer.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <h4>computed binding</h4> <template is="dom-repeat" items="[[_computeriskcombo(risknamesarr, riskworkflowstatearr)]]"> <div>[[item.name]] + [[item.state]]</div> </template> </template> </dom-module> </body>
Comments
Post a Comment