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

时间:2015-10-08 03:42:07

标签: javascript json data-binding polymer polymer-1.0

我正在研究一种聚合物元素,它从Web服务接收json数组。在组件中有一个模板应该迭代数组以显示一个数组值。

以下代码显示其中一个嵌套数组。

    [
{
    "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"
        }
    ]
}]

以下是webservice返回的数据示例

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

当前输出:他是他

我需要做的是遍历对象中的每个句子并显示其word属性。通过增加items =“{{response.0.sentence}}”

中的0可以做到这一点

想要输出:他就是他们聚合物红色

我查看了几个可能的解决方案,例如通过以下方式创建绑定,但没有运气。

CONVERT

我的下一个猜测是创建某种计算值,但是我很难找到在绑定中实现它的方法,或者在步进嵌套数组时我遗漏了一些明显的东西。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

使用嵌套的dom-repeat

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