Question

我尝试使用polymer's template repeat这样的功能将自定义子元素绑定到本地存储的值：

<polymer-element name="aw-outerElement">
<template>
    <template repeat="{{group in grouplist}}">
        <aw-innerElement groupId="{{group.groupId}}" name="{{group.name}}" val="{{group.val}}"></aw-innerElement>
    </template>
</template>
<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}

    ];
}
</script>

在上面的代码中，我尝试传递数据绑定this.prj.ke.groupVal100和this.prj.ke.groupVal200 通过属性aw-innerElement到我的内部元素val。 aw-innerElement是自定义paper-input元素，其中value属性应设置为例如this.prj.ke.groupVal100。似乎仅存储的初始值 0 将被设置并且 NOT 值属性中的数据绑定字符串this.prj.ke.groupVal100。有没有办法在内部元素内部使用template repeat进行数据绑定？

我的内心元素如下所示：

<polymer-element name="aw-innerElement" attributes="groupId name val">
<template>
    <paper-input type="number" floatingLabel label="{{groupId}} {{name}}" value="{{val}}" error="{{i18nnrerror}}"></paper-input>
</template>
<script>
Polymer('aw-innerElement', {
publish: {
     groupId: 0,
     name: '',
     val: 0
},

ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    ...

}
</script>

如您所见，我的innerElement的value="{{val}}"应设置为this.prj.ke.groupVal100和this.prj.ke.groupVal200。

提前致谢！

Answer 1

我知道我正在挖掘一个旧问题，但对于未来的搜索者来说，这可能会派上用场。 Polymer不允许将变量作为键，因此您需要通过类似的函数将其拉出来：

...
<template is="dom-repeat" items="{{users}}">
  <li>{{showValue(item)}}</li>
</template>
...

<script>
  Polymer('aw-outerElement', {
    // Standard Polymer code here
    showValue: function(item){
      return item[myVar];
    }
  });
</script>

然后，您可以在Javascript中根据需要进行操作，并在项目中返回该项目的输出。

Answer 2

我是聚合物的新手，所以也许我的答案不正确。但我做了类似这样的事情，你正试图这样做。

这是我的代码示例

我猜你的问题是你没有在模板上使用bind

<template bind="{{grouplist}}">
    <template repeat="{{group in grouplist}}">
    </template>
</template>


<script>
Polymer('aw-outerElement', {
ready : function () {
    // Binding the project to the data-fields
    this.prj = au.app.prj;
    this.grouplist =  [ 
                    { groupId: 100, name: 'GroupName1', val: this.prj.ke.groupVal100},
                    { groupId: 200, name: 'GroupName2', val: this.prj.ke.groupVal200}
    ];
}
</script>

Answer 3

在这个例子中，传递一个值似乎对我很好：http://jsbin.com/kalih/4/edit

<polymer-element name="x-bar">
  <template>
    <paper-input id="input"
                 label="{{name}}"
                 value="{{val}}">
    </paper-input>
    <button on-tap="{{logVal}}">Log val</button>
  </template>
  <script>
    Polymer('x-bar', {
      publish: {
        val: 0
      },
      logVal: function() {
        console.log(this.$.input.value);
      }
    });
  </script>
</polymer-element>

<polymer-element name="x-foo">
  <template>
    <template repeat="{{item in items}}">
      <x-bar name="{{item.name}}" val="{{item.val}}"></x-bar>
    </template>
  </template>
  <script>
    Polymer('x-foo', {
      ready: function() {
        this.items = [
          {
            name: 'baz',
            val: 28
          },
          {
            name: 'qux',
            val: 42
          }
        ];
      }
    });
  </script>
</polymer-element>  

<x-foo></x-foo>

顺便说一下，您的aw-innerElement不需要attributes属性，因为您使用的是publish对象（它们的用途相同，但发布可让您设置默认值，你已经完成了）。此外，我们建议您不要使用元素名称来表示，HTML解析器实际上会将它们全部小写。

嵌套的自定义聚合物元素中的数据绑定（递归数据绑定）

3 个答案: