Polymer - updating element

Question

I study Polymer. One thing that challenges me is updating an array element. I'm sorry there was no CDN for Polymer, so I could have put together a violin. So far, I have an element defined as follows:

my-element.html

<dom-module id="my-element">
  <button on-click="onLoadData">Load Data</button>  
  <button on-click="onTest1Click">Test 1</button>
  <button on-click="onTest2Click">Test 2</button>

  <template is="dom-repeat" items="[[ data ]]" as="element">
    <div><span>[[ element.id ]]</span> - <span>[[ element.status ]]</span></div>
    <template is="dom-repeat" items="[[ element.children ]]" as="child">
      <div>&nbsp;&nbsp;<span>[[ child.id ]]</span> - <span>[[ child.status ]]</span></div>
    </template>
  </template>

  </template>

  <script>
    Polymer({
      is: 'my-element',
      properties: {
        data: {
          type: Array,
          value: function() {
            return [];
          }
        }
      },

      onLoadData: function() {
        // Generate some dummy data for the sake of illustration.
        for (var i=1; i<=3; i++) {
          var element = {
            id: i,
            state: 'Initialized',
            description: ''
          };

          element.children = [];
          for (var j=1; j<=5; j++) {
            var child = {
              id: i + '-' + j,
              state: 'Initialized',
              description: ''
            }
            element.children.push(child);
          }

          data.push(element);
        }
      },

      // Setting an individual property value works
      onTest1Click: function() {
        this.set('data.0.children.0.state', 'data set');
      },

      // Setting an entire object value does NOT work.
      onTest2Click: function() {
        var c = this.data[0].children[0];
        c.state = 'data set';
        this.set('data.0.children.0', c);
      }
    });
  </script>
</dom-module>

For some reason, if I update the value of a property of an array element (as shown in onTest1Click), the user interface is updated properly. However, if I update the entire item (as shown in onTest2Click), the user interface is NOT updated. In my real problem, I am updating several element properties. For this reason, I am trying to update an array element, not just a property. Am I doing something wrong or misunderstanding something? Or will I have to update each property value separately?

Answer 1

, (, ), , this.set.

, this.splice('data.0.children', 0, 1, c) 0 , , . this.shift, this.unshift, this.push this.pop. Array.

, . , , , . Polymer, . , . https://jsbin.com/rapomiyaga/1/edit?html,output ( Günter Zöchbauer jsbin)

/ , this.set.

Answer 2

, . set, Polymer , . , ( ). , .