CODEWITHSUNDEEP
polymerpolymer-1.0
Johannes Reuter
Johannes Reuter

Reputation: 3547

Notify polymer complex object has changed

How can I trigger a refresh of the template if a member of a data-bound complex object changes?

In the template:

<other-component data="{{complexObject}}"></other-object>

In the component:

_onChange: function(newData) {
   //callback from some event-system
   this.set("complexObject", newData);
}

The _onChange-Method is triggered when the complexObject is changed, but newData is always a reference to the same object, just members of this object changed - because of this, polymer doesn't update the view and doesn't pass the data down to other-component.

Is there a way to let polymer know that there is indeed some new data and it has to re-evaluate the template? It is working if I create a shallow clone of newData, but that seems like a hack and could hurt performance for big objects.

I can't use the set method to change the properties of the object via the path because the change happens outside of polymer-elements and I can't control it.

Upvotes: 1

Views: 408

Answers (3)

linto cheeran
linto cheeran

Reputation: 1472

this.complexObject = _.clone(this.complexObject)

cloning & reassigning might solve this problem`

Upvotes: 0

Goce Ribeski
Goce Ribeski

Reputation: 1372

Here is one working example where sibling elements are interchanging data between each other: Plunk.

Docs: https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#array-binding

<template>
  <button on-tap="btnTapped">change Emploees from Second</button>
              second: empl: <span>{{empl.employees.0.firstName}}</span>
</template>
...
<script>
btnTapped: function () {

    console.log('Second: btnTapped');

    //Propagate array subproperty
    this.set('empl.employees.0.firstName', 'Test');
    console.log(this.empl.employees[0].firstName);


    //Object set
    this.set('temp.firstName', 'Test');

  }
</script>

Upvotes: 0

epascarello
epascarello

Reputation: 207531

Call render()

this.$.yourTemplateID.render();

Upvotes: 0

Related Questions