如何使用存储在自定义聚合物 2.0 元素 属性 中的对象

Question

我想在 polymer declare 属性(array) 中存储一些对象，稍后我将使用这些对象。

它将存储对象，但不会触发该对象的方法。

工作流程

• 在页面加载时 _pageActive 将调用
• _pageActive 将所有对象存储到 ObjectCollection
• as ObjectCollection 更改 _showAllObject 将调用
• this.ObjectCollection 将打印在 _showAllObject
• 抛出错误this.ObjectCollection[0]._test is not a function

下面是我的代码，

 <dom-module id="my-search">
   <template>
    <style>
      :host {
        display: table;
        width: 100%;
      }
    </style>
          <paper-icon-button id="search" icon="search"></paper-icon-button>
  </template>

  <script>
    class MySearch extends Polymer.Element {
      static get is() { return 'my-search'; }

        static get properties() {
            return {
              pageActive: {
                type: String,
                observer: '_pageActive'
              },
              ObjectCollection: {
                type: Array,
                notify: true,
                readOnly: false,
                observer: '_showAllObject'  
              }       
          }

             _pageActive(){
                var thisElement = this;
                var element1 = this.$.search;
                this.ObjectCollection = [{thisElement },{element1}];
             }

            _showAllObject(){
                console.log(this.ObjectCollection);
                this.ObjectCollection[0]._test();
            } 

            _test(){
                alert("testing...!");
            }      
        }
    }

    window.customElements.define(MySearch.is, MySearch);
  </script>
</dom-module>

Why _test() method is not getting call as this.ObjectCollection[0] is this object

Answer 1

为了观察对象的变化，使用：

this.set('ObjectCollection', [thisElement, element1]);

而不是

 this.ObjectCollection = [{thisElement },{element1}];

然后您的 _showAllObject 函数将被触发。