[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