javascript - 嵌套自定义 polymer 元素中的数据绑定(bind)(递归数据绑定(bind))

Question

我尝试使用 polymer's 将自定义子元素绑定(bind)到本地存储的值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>

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

我的内部元素如下所示:

<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>

正如您在上面看到的value="{{val}}"我的 innerElement 应该设置为 this.prj.ke.groupVal100和this.prj.ke.groupVal200 .

提前致谢!

Answer 1

我知道我正在挖掘一个老问题，但对于 future 的搜索者来说这可能会派上用场。 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 中进行任意操作，并在 items 中返回该 item 的输出。