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

Question

我从angular来到polymer，我对repeat函数有点困惑。

这只适用于数组吗？

例如，在下面的代码片段中，我可以对 names var但不能为每个条目 People 瓦尔。这是正确的，只是不可能的，还是我错过了一些东西，因为我似乎无法在网上找到任何明确解释的东西，并且文档并没有真正给出明确的解释。

如果在事件是如预期即仅适用于数组，有没有人有任何建议，我可能如何为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