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

我尝试使用polymer的

模板重复

功能将自定义子元素绑定到本地存储的值，如下所示：

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

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

值=“{val}”

应该设置为

this.prj.ke.groupVal100

和

this.prj.ke.groupVal200

---

提前谢谢

我对聚合物是新手，所以我的答案可能不正确。但我做了你想做的事情

这是我的代码示例

我想你的问题是你没有在模板上使用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>

聚合物（“aw-Outrelation”{
就绪：函数（）{
//将项目绑定到数据字段
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}
];
}

在本例中，传入一个值似乎对我很有效：

对数值
聚合物（“x-bar”{
出版：{
瓦尔：0
},
logVal:function（）{
console.log（this.$.input.value）；
}
});
聚合物（“x-foo”{
就绪：函数（）{
此项。项目=[
{
名称：“baz”，
瓦尔：28
},
{
名称：“qux”，
瓦尔：42
}
];
}
});

---

顺便说一句，您的

aw innerElement

不需要有

attributes

属性，因为您使用的是

publish

对象（它们具有相同的用途，但是publish允许您设置默认值，您已经完成了这项工作）。此外，我们建议您不要对元素名称使用驼峰大小写，HTML解析器实际上会将它们全部小写。

我知道我在挖掘一个老问题，但对于未来的搜索者来说，这可能会派上用场。 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>

。。。
{{showValue（项目）}
...
聚合物（“aw-Outrelation”{
//这里是标准聚合物代码
showValue:功能（项目）{
返回项目[myVar]；
}
});

---

然后，您可以在

Javascript

中任意操作，并返回items中该项的输出。

Hi Rob。在上面的示例中，您使用的是离散值val，例如28！我的问题是，我不想将离散值绑定到

aw innerelement

值属性，但我想做一个变量data-b绑定。我的意思是我的

aw innerelement

的

value

属性应该绑定到

this.prj.ke.kg100

，并且应该是这样的：。我的

groupList

有7个组，有10个子组。我的兴趣是根据我的gro中的组帐户，不要复制每个

aw innerelement

upList.this.prj.ke.groupVal100在您的项目中的值是多少？它是存储在浏览器的本地存储中的值，在我的项目中是可更改的elsewere

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