javascript - Polymer 1.0 - 通过模板绑定(bind)上的嵌套数组递增。

Question

我正在开发一个 polymer 元素，它从网络服务接收 json 数组。在组件中，有一个模板应该迭代数组以显示数组值之一。

以下代码显示嵌套数组之一。

    <template is="dom-repeat" items="{{response.0.sentence}}">
     <div style="display: inline; postition: realative;">
       <span>{{item.word}}></span>
     </div>
   </template>

这是网络服务返回的数据示例

    [
{
    "sentence": [
        {
            "word": "He",
            "Color": "Black"   
        },
        {
            "word": "is",
            "color": "purple"   
        },
        {
            "word": "it",
            "color": "green"
        },
        {
            "word": "he",
            "color": "red"
        }
    ]
},
{
    "sentence": [
                {
            "word": "they",
            "Color": "Black"   
        },
        {
            "word": "it",
            "color": "purple"   
        },
        {
            "word": "polymer",
            "color": "green"
        },
        {
            "word": "red",
            "color": "green"
        }
    ]
}]

当前输出:他就是他

我需要做的是迭代对象中的每个句子并显示其单词属性。这应该可以通过增加 items="{{response.0.sentence}}"中的 0 来完成

想要的输出:他是他，他们是 polymer 红

我查看了几种潜在的解决方案，例如通过以下方式创建绑定(bind)，但没有运气。

   <template is="dom-repeat" items="{{response}}" index-as="i">
     <div style="display: inline; postition: realative;">
       <span>{{item.i.sentence.word}}></span>
     </div>
   </template>

我的下一个猜测是创建某种计算值，但我很难找到一种在绑定(bind)中实现该值的方法，或者在单步执行嵌套数组时缺少一些明显的东西。

如有任何帮助，我们将不胜感激。

Answer 1

使用嵌套的dom-repeat:

 <template is="dom-repeat" items="[[response]]">
  <template is="dom-repeat" items="[[item.sentence]]">
    <span>[[item.word]]</span>
  </template>
 </template>