聚合物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>