Question

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

这只适用于数组吗？

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

如果在事件中它是预期的，即仅适用于数组，是否有人对我如何为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

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

1 个答案: