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]：items的预期数组，找到Object {1: Array[1], 2: Array[2], 3: Array[1]}

为什么呢？谢谢！

Answer 1

服务器正在发送一个大对象而不是一个数组。如果您可以控制服务，则应该在将对象发送到客户端之前将其转换为数组服务器端（更高效，更少浪费带宽）。

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

以下是几个选项：

在ajaxResponse上使用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根据ajaxResponse计算数据集。

// 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

[dom-repeat :: dom-repeat]：`items`的预期数组，找到了Object

1 个答案: