Polymer dom-repeat not displaying the dynamically added values

问题

Polymer dom-repeat is not working as expected, when I add a new element to the Array dynamically, dom-repeat not displaying the value.

I am using the Polymer's array mutation methods when pushing items into the array, but still not working.

Please check the codepen link;

    <dom-module id="wind-studio-widget">
  <template>
    <div on-tap='_addNewPad' style="cursor:pointer"><strong>Click Me</strong></div>
  <template id="padListContainerId" is="dom-repeat" items="[[padList]]">
    <p style="border:1px solid red">&nbsp;<span>[[item.id]]</span></p>
  </template>
  </template>
</dom-module>
<script type="text/javascript">
    Polymer({

        is: 'wind-studio-widget',

        properties: {
            baseUrl: {type: String},
            padList: {
                type: Array,
                notify: true
            },
            padListAverage: {type: Object}
        },

        ready: function () {
            //this.baseUrl = localStorage.baseUrl;
            //this.loadPadData();
          this.padList = [{'id':'1'},{'id':'2'}];
        },

        _addNewPad: function () {
            var newPadList = this.padList;
            newPadList.push({'id':'3'});
            this.set('padList', []);
            this.set('padList', newPadList);
            console.log(this.padList);
          //this.$.padListContainerId.render();
        }
    });
  </script>

http://codepen.io/nareshchennuri/pen/vxjvdO

来源：https://stackoverflow.com/questions/42979897/polymer-dom-repeat-not-displaying-the-dynamically-added-values