[1.0.2] Databinding and nested objects

[robrez]

It seems that databinding a value from a nested object works only once. Here's an arbitrary example..

The markup...

<template>
    <div>
      <div>{{session.user.name}}</div>
      <div>{{session.user.id}}</div>
    </div>
    <button on-tap="_increment">Click</button>
  </template>

The script...

    properties: {
      session: {
          type: Object,
          value: function() { return { user: { name: "rob", id: 1 } }; }
      }
    },

    _increment: function() {
      this.session.user.id ++;
      console.log(this.session.user.id);
    },

I can see the id incrementing in the log, but the view never updates w/ the model.

I tried registering an observer on "session", it executes only once. A computed property, "computedId" is only computed once.

[arthurevans]

See:

https://www.polymer-project.org/1.0/docs/devguide/properties.html#observing-path-changes

You'll need to use the set API to update the object:

this.set('session.user.id', this.session.user.id+1);

[robrez]

Thanks so much, that works.

I figured there was something in the docs that I overlooked.