如何在聚合物重复属性中使用JSON对象？

Question

我从角度来到聚合物,我对重复功能有点困惑.

这只适用于数组吗？

例如,在我的代码片段中,我可以为namesvar中的每个值重复但不能为Peoplevar中的每个条目重复.这是正确的,只是不可能或我错过了一些东西,因为我似乎无法在网上找到任何清楚解释的内容,而且文档并没有真正给出明确的解释.

如果在事件中它是预期的,即仅适用于数组,是否有任何人有任何关于如何为JSON对象做类似的建议

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="poly-x"  attributes="">
  <template>

    <div class="container">
        <div class="row">
          {{greeting}}
        </div>
        <div class="row">
          {{people.john.name}}
        </div>
        <template repeat="{{name in names}}">
        <div class="row" >
          {{name}}
        </div>
        </template>
        <template repeat="{{person in people}}">
        <div class="row" >
          {{person.name}}
        </div>
        </template>


    </div>
    </template>
    <script>
    (function(){
        console.log('I\'m here');

    Polymer({
      greeting : '\'Allo',
      names: ['john', 'Mary', 'Sam'],

      people: {
              john: {
                name:"John Smith"
                ,address:"1 someplace, somewhere"
            },
            mary: {
                 name:"John Smith"
                ,address:"13, no luck road"
            }

      },  
      observe: {

        },
      ready: function(){   
      }
    });
  })();


  </script>
</polymer-element>

Answer 1

重复仅适用于数组.这是一个已知的问题:

https://github.com/Polymer/polymer-expressions/issues/11

你可以通过一些额外的步骤来实现你正在寻找的基本效果,但是有一些缺点.这是一个带内联函数的简单示例:

    <template repeat="{{person in keys(people)}}">
    <div class="row" >
      {{people[person].name}}
    </div>

然后在元素原型上定义函数,如下所示:

  keys: function(input) {
    return Object.keys(input);
  }, 

内联函数表达式相对较新,而不是在文档中,但它们的工作方式与过滤器非常相似.

您可以在此处查看此代码:

http://jsbin.com/puhis/1/edit

请注意,此方法存在一些问题:添加新对象people不会导致添加新行.替换整个people对象会导致绑定更新,但如果对象中只有少数项目发生更改,则效率很低.

如果在对象中维护数据的数组版本,并在对象发生变异时进行变异,则可以观察数组.此版本稍微多一些代码,但它会更新,并且在添加或删除元素时不会创建或销毁额外的DOM节点:

http://jsbin.com/puhis/3/edit