3

I have array of objects and a property, my dom-repeat structure is like as below

     <template is="dom-repeat" items="{{arrayOfObj}}">              //first dom repeat      
       <span>[[myProperty]]<span> //here also its not updating      
        <template is="dom-if" if="[[_checkSomeCondition()]]">    //calling method from dom-if
          <span>[[myProperty]]<span>     //here its not getting updated value
        </template>
     </template>

I have a property

 properties:{
 myProperty:{
  type:Boolean
 }
}

my function is called each time when dom-repeat iterates

 _checkSomeCondition:function() {  //I'll check and set property
  if(some condition){
     this.myProperty = true;
     return true;
   }
   else{
     this.myProperty = false;
     return true;
   }
 console.log(this.myProperty); //I'll get the updated value on console
}

but its not changing in screen!! It will display whatever data it set first time inside _checkSomeCondition !! but in console its updating

For testing I inserted a button and after all dom-repeat rendered on tapping that button I called some function ,there when I changed value it get reflected everywhere

    this.myProperty = true;

but why its not working when value is changed inside a function which is called by dom-repeat?? I tried all 3 ways of updating a object

Plunker:https://plnkr.co/edit/iAStve97dTTD9cv6iygX?p=preview

ksh
  • 639
  • 1
  • 7
  • 23
  • I feel like a filter function really has no business updating a value like you are doing. Why wouldn't you just dynamically set the value on the object via another method? – Jeff Machamer Dec 22 '16 at 20:55
  • actually this is demo code so I'm returning true in both if and else statement ,but in my original code I must do some more validations! but syntax remains almost same.. – ksh Dec 23 '16 at 05:09

3 Answers3

1

Setting a variable via this.myValue = 'somevalue'; won't update binding.

Its best to set variables via this.set('variablename', 'variablevalue');

You could also, after setting a property via this.variablename = 'variablevalue'; this.notifyPath('variablename');

Snewedon
  • 2,410
  • 2
  • 13
  • 27
  • Hey thanx for the reply !! I tried your solution but still have same issue! Please check updated plunker – ksh Dec 19 '16 at 04:47
0

Try

<template is="dom-if" if="[[_checkSomeCondition(myProperty)]]">    //calling method from dom-if
    <span>[[myProperty]]<span>   //here its not getting updated value
</template>

And then

_checkSomeCondition: function(property) {
edje
  • 94
  • 6
  • I don't know will it works or not!! but still if I wanted to update many property, I can't send all those from function call, this method is not feasible!! – ksh Dec 17 '16 at 05:51
  • Have a look at this Plunk as an example of how you can use reactive variables in Polymer. I have included examples of modifying a variable in an array and calculating using a variable external to the array. You may just need to rethink what you are trying to achieve. https://plnkr.co/edit/LYqWbGOOBeiq6Perjvzb?p=preview – edje Dec 21 '16 at 12:47
0

I have modified your code like below. Im not sure if it helps for your senario. Please have a look may help to bring up ideas

<template is="dom-repeat" items="{{sensor.Sensor.Contaminants}}" index-as="index"> <span>{{myProperty}}<span> //here also its not updating
<div>{{_checkSomeCondition(index)}}<div> //here its not getting updated value </template>

And your _checkSomeCondition method will be:

_checkSomeCondition: function() { //I'll check and set property console.log(index); if(<your condition>){ this.myProperty = 'true'; } else{ this.myProperty = 'false'; } // Return whatever you want to show in UI return this.myProperty; console.log(this.myProperty); //I'll get the updated value on console },

and your myProperty should notify the changes. So the property should have notify: true.

With this code i could see the changes in the UI as expected. Let me know if it helps

Vishnu
  • 1,516
  • 1
  • 10
  • 15