[DOM重复:: DOM的重复]：用于`items`预期阵列，发现对象

Question

我有以下的模板：

<iron-ajax 
     id="ajax" 
     url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
     handle-as="json" 
     verbose=true 
     last-response={{ajaxResponse}} 
     loading="{{cargando}}"> </iron-ajax> 

<template is="dom-repeat" items="[[ajaxResponse]]"> 

Ajax响应包含以下JSON（正确）：

{ 
"1": [{ 
    "id": "6", 
    "idfolleto": "1", 
    "fila": "1", 
    "orden": "1", 
    "tipo": "carrousel", 
    "titulo": "", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}], 
"2": [{ 
    "id": "7", 
    "idfolleto": "1", 
    "fila": "2", 
    "orden": "1", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 1", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}, { 
    "id": "8", 
    "idfolleto": "1", 
    "fila": "2", 
    "orden": "2", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 2", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}], 
"3": [{ 
    "id": "9", 
    "idfolleto": "1", 
    "fila": "3", 
    "orden": "3", 
    "tipo": "texto-imagenes", 
    "titulo": "Texto 3", 
    "subtitulo": null, 
    "color1": null, 
    "color2": null, 
    "color_fondo": null 
}] 
} 

但我得到一个错误：

[dom-repeat::dom-repeat] : expected array for items , found Object {1: Array[1], 2: Array[2], 3: Array[1]}

为什么？ 谢谢！

Answer 1

服务器正在发送大对象而不是数组。如果您控制了服务，则应在将对象发送到服务器端之前将其转换为阵列，然后再将其发送到客户端（效率更高，浪费更少的带宽）。

如果您不能（或不想）修改服务，您可以在客户端执行转换。这使您有机会映射 - 减少数据集，丢弃视图中不需要的数据。

这里有几个选项：

• 使用上一个observer，设置另一个属性，在转发器的约束（例如，_data）。

  // template 
  <iron-ajax 
       url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
       last-response="{{ajaxResponse}}"> 
  </iron-ajax> 
  
  <template is="dom-repeat" items="[[_data]]">...</template> 
  
  // script 
  Polymer({ 
      properties: { 
      ajaxResponse: { 
       type: Object, 
       observer: '_ajaxResponseChanged' 
      }, 
  
      _data: Array 
      }, 
  
      _ajaxResponseChanged: function(r) { 
      // get data of type 'texto-imagenes' only 
      this._data = Object.keys(r) 
           .map(key => ({key, values: r[key].filter(v => v.tipo === 'texto-imagenes')})) 
           .filter(x => x.values.length); 
      }, 
      ... 
  }); 
  

• 使用computed property或computed binding，其基于对数据集。

  // template 
  <iron-ajax 
       url="backend/api.php?operacion=contenidos&idf=[[datos.id]]&len=[[len]]" 
       last-response="{{ajaxResponse}}"> 
  </iron-ajax> 
  
  // computed property 
  <template is="dom-repeat" items="[[_data]]">...</template> 
  
  // OR computed binding 
  <template is="dom-repeat" items="[[_computeData(ajaxResponse)]]">...</template> 
  
  // script 
  Polymer({ 
      properties: { 
      ajaxResponse: Object, 
  
      _data: { 
       computed: '_computeData(ajaxResponse)' 
      } 
      }, 
  
      _computeData: function(r) { 
      // get data of type 'texto-imagenes' only 
      return Object.keys(r) 
         .map(key => ({key, values: r[key].filter(v => v.tipo === 'texto-imagenes')})) 
         .filter(x => x.values.length); 
      }, 
      ... 
  }); 
  

plunker