CODEWITHSUNDEEP
javascripthtmlpolymer
Jonathan Dumaine
Jonathan Dumaine

Reputation: 5756

Is two way binding with an attribute expression possible in Polymer?

I've noticed that two way binding only works when the expression is only the variable name itself (e.g., {{value}}). The two way binding breaks if the expression needs to act on the value, (e.g., {{value*5}}). Is this a limitation in Polymer, are there any workarounds for the use case of many values needing to be derived from an expression?

  Clicking the +/- buttons should increment all 3 numbers at the same time.

  <br/>
  <br/>

   <polymer-element name='test-input'>

       <template>

           <style>
               #val {
                   font-size: 50px;
               }
           </style>

           <div id='val'>{{value}}</div>

           <button on-tap='{{increment}}'>+</button>
           <button on-tap='{{decrement}}'>-</button>

       </template>

       <script>
           Polymer({

               publish: {
                   value: 0
               },
               increment: function() {
                   this.value = this.value + 1;
               },
               decrement: function() {
                   this.value = this.value - 1;
               }
           })
       </script>
   </polymer-element>

   <polymer-element name='test-app'>
       <template>
           Hue:
           <b>{{hue}}</b>

           <br/>
           <br/>

           First:

           <test-input id='two' value='{{hue}}'></test-input>
           <br/>
           (this one works)
           <br/>
           <br/>

           Second:
           <test-input id='one' value='{{hue * 5}}'></test-input>
           <br/>
           (this one does not work)


       </template>
       <script>
           Polymer({ 
               hue: 5,
           })
       </script>
   </polymer-element>


   <test-app></test-app>

http://plnkr.co/edit/KjQ9DusaFg2jp1BTFUde?p=preview

Thanks for the help.

Upvotes: 3

Views: 334

Answers (2)

wirlez
wirlez

Reputation: 388

Here is a simple demonstration to why Polymer does not update the property when binded inside a input value attribute.

<polymer-element name='my-test-element'>
    <template>
        Number: {{num}}<br>
        <input id='one' value='{{num}}' on-keypress='{{keyPressHandler}}' /><br>
        Value: {{$.one.value}}
    </template>
    <script>
        Polymer({
            num: 0,
            keyPressHandler: function(){
                this.$.one.value = this.num*4;
            }
        });
    </script>
</polymer-element>

This would cause the same effect. The value inside the input would change every time you changed the value. The situation speaks for itself...

Edit: Plunk: http://plnkr.co/edit/UEoqBGXAyzROJsP20suU?p=preview

Upvotes: 0

Goce Ribeski
Goce Ribeski

Reputation: 1372

Next error, that appears in your Plunk, means wrong order in importing of the elements:

"Attributes on test-input were data bound prior to Polymer upgrading the element. This may result in incorrect binding types."

Just switch the order of element definitions.

Here is the corrected Plunk.

<body>


           <polymer-element name='test-input' attributes="testData">
           ...

EDIT:

Here is one work around the problem. Problem came out to be in using expression in the child element attribute:

//1. this is not working
<test-input id='one' value='{{hue * 10}}'></test-input>

//2. this works
<test-input id='one' value='{{hue}}'></test-input>

//3. multiplying is done in the child element using filter:
{{value | myltiply}}

Here is the working Plunk

Can't tell why 1. is not working, I would like to know the background of that too.

Upvotes: 1

Related Questions