web component - Polymer2.0 - Trying to change webcomponent attribute value by binding value from paper-input -


i trying control attribute value of webcomponent polymer paper input.

i able change values 2 binding of paper input not able control attribute value

i created below example , trying change resizable-panels attribute vertical

 <resizable-panels [[text]]>

to

 <resizable-panels vertical>

using paper-input

codepen code reference https://codepen.io/nagasai/pen/qmjjqw

html:

  <head>   <base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">   <link rel="import" href="polymer/polymer.html">   <link rel="import" href="resizable-panels/resizable-panels.html">   <link rel="import" href="paper-input/paper-input.html"  </head> <body>   <x-foo></x-foo>    <dom-module id="x-foo">     <template> <style> .panel { padding: 20px; color: white; font-family: sans-serif; width: 50%; }       .p1 { background-color: #673ab7; }       .p2 { background-color: #e91e63; }       .p3 { background-color: #00bcd4; }       .p4 { background-color: #fb8c00; }       .p5 { background-color: #607d8b; }       .p6 { background-color: #4caf50; } </style>    <paper-input value="{{text::input}}"></paper-input>      <resizable-panels id="rp-2">       <div class="panel p1">lorem ipsum dolor…</div>       <div class="panel p2">second panel</div>     </resizable-panels>       <br>          <resizable-panels [[text]]>       <div class="panel p1">lorem ipsum dolor…</div>       <div class="panel p1">second panel</div>       <div class="panel p1">third panel</div>     </resizable-panels>     </template>   </dom-module> </body>

js:

  class xfoo extends polymer.element {     static is() { return 'x-foo'; }      static properties() {       return {};      }        toggle() {   this.$.collapse.toggle(); }    }   customelements.define(xfoo.is, xfoo);

thats not how supposed work, cant slap tag , expect work - since not server side building - not supposed treat templates this.

here working demo: https://codepen.io/anon/pen/rzogqx

you should toggling boolean property vertical between true/false archieve want. hope helps.


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more