聚合物dom重複問題

Question

使用聚合物渲染一個對象數組時，它不斷啓動我一個例外。

下面是從服務器檢索的數據模型：

{ 
    "lastUpdate":"yyyy-MM-ddTHH:mm:ss.mmm", 
    "info": [ 
    { 
     "title": "Some nice title" 
    }, 
    ... 
    ] 
} 

這裏是我的聚合物組分的模板：

<dom-module is="items-list"> 
    <template> 
     <dl> 
      <dt>last update:</dt> 
      <dd>[[$response.lastUpdate]]</dd> 
      <dt>total items:</dt> 
      <dd>[[$response.info.length]]</dd> 
     </dl> 
     <template is="dom-repeat" items="{{$response.info}}"> 
      {{index}}: {{item.title}} 
     </template> 
    </template> 
    <script src="controller.js"></script> 
</dom-module> 

而這裏的控制器：

'use strict'; 
Polymer(
    { 
     properties: { 
      info: { 
       type: Array 
      }, 
      $response: { 
       type: Object, 
       observer: '_gotResponse' 
      } 
     }, 
     _gotResponse: function(response) 
     { 
      console.log(response); 
      if (response.info.length) 
      { 
       try 
       { 
        //here I try to set info value 
       } 
       catch(e) 
       { 
        console.error(e); 
       } 
      } 
     }, 
     ready: function() 
     { 
      //set some default value for info 
     }, 
     attached: function() 
     { 
      //here I request the service for the info 
     } 
    } 
); 

如果試圖設置信息值如：

this.info = response.info; 
this.set('info', response.info); 
this.push('info', response.info[i]); //inside a loop 

但渲染的第一個項目之後的結果斷裂，推出的例外是： 「遺漏的類型錯誤：空的無法讀取屬性‘價值’」

Answer 1

如果info === $response.info那麼爲什麼不直接使用items={{info}}在重複？

編輯： 嘗試使用以下方法修改您的代碼。

'use strict'; 
Polymer({ 
    properties: { 
     $response: { 
      type: Object 
     } 
    }, 
    _gotResponse: function(response) 
    { 
     console.log(response); 
     ... 
     this.$response = response 
     ... 
    }, 
    attached: function() 
    { 
     //here I request the service for the info 
     someAjaxFn(someParam, res => this._gotResponse(res)); 
    } 
}); 

在這種情況下，您不需要觀察者。當隱式的不會/不會工作時，您只使用明確的觀察者。即fullName:{type:String, observer:_getFirstLastName} 或

value:{type:String, observer:_storeOldVar} 
... 
_storeOldVar(newValue, oldValue) { 
    this.oldValue = oldValue; 
} 

如果要更新整個陣列，即this.info，那麼簡單的用this.info = whatever內您的函數一次。如果你不想更新整個數組，只是其中的一些元素，那麼你會想要使用聚合物的本地數組突變方法，因爲JS數組方法不會觸發觀察者。

同樣，由於您的模板不使用信息，因此您不需要屬性info。如果你想保留信息，那麼不要在$response之內存儲信息。事實上，$在聚合物中有特殊含義，所以儘量不要用它來命名屬性。您可以簡單地使用屬性info和lastUpdate爲您的聚合物。

最後需要注意的是，當您從聚合物中調用函數時，要小心變量範圍。由於聚合物實例中的功能經常使用this指本身，它可能會導致 遺漏的類型錯誤：無法讀取屬性「值」 ......」 作爲this不再是指聚合物的實例在解析時

。

例如，假設你的主機HTML是

... 
<items-list id='iList'></items-list> 
<script> 
    iList._gotResponse(json); // this will work. 
    setTimeout(() => iList.gotResponse(json),0); //this will also work. 
    function wrap (fn) {fn(json)} 
    wrap (iList._gotResponse); //TypeError: Cannot read property '$response' of undefined. 
    function wrap2(that, fn) {fn.bind(that)(json)} 
    wrap2 (iList,iList._gotResponse); // OK! 
    wrap (p=>iList._gotResponse(p)) //OK too!! 
    wrap (function (p) {iList._gotResponse(p)}) //OK, I think you got the idea. 
</script>