Question

我有一个关于dom-repeat的问题。我有两个不同的元素，如：

<host-element>
    <item-element></item-element>
    <item-element></item-element>
</host-element>

每个item-element都有一个数组，可以在运行时添加项目。当item-element 附加是触发事件，以便host-element知道其内容中的item-element并添加每个 item-element到属性的item-element数组。访问item-element 您可以绑定到host-element的属性的项目数组，如：

<host-element items="{{itemElements}}">
    <item-element></item-element>
    <item-element></item-element>
</host-element>

使用itemElements

打印dom-repeat迭代的内容

<template is="dom-repeat" items="{{itemElements}}">
    <ul>
        <template is="dom-repeat" items="{{item.values}}" as="value">
            <li>[[value]]</li>
        </template>
    <ul>
</template>

到目前为止一切都按预期工作。当item-element更改dom-repeat时应该重绘，但它没有发生。您可以dom-repeat.observe或dom-repeat.render使用documentation个州更新dom-repeat元素。手动使用dom-repeat.render可以使用自动运行，但并不理想。因此，我试图找到一个dom-repeat.observe的解决方案到目前为止没有运气。

<template is="dom-repeat" items="{{itemElements}}" observe="values.splice">
    <ul>
        <template is="dom-repeat" items="{{item.values}}" as="value" observe="????">
            <li>[[value]]</li>
        </template>
    <ul>
</template>

我已将我的来源推送到source和live demo

的github

感谢您的帮助。桑德罗

Answer 1

我找到了一个让它上班的黑客。我需要改变包含所有项目的数组。每次更改_itemElementChanged时都会调用函数item-element。

_itemElementChanged: function(){
      // the check is needed if this function is run multiple times in the same tick it would erase the whole array
      if (this.items.length > 0){
        var itemsTmp = this.items;
        this.items = [];
        this.async(function () {
          this.self.items = this.items;
        }.bind({items: itemsTmp, self: this}));
      }
}

需要检查this.items.length > 0 {}} _itemElementChanged 在异步函数运行之前。在这种情况下，this.items将结束为空。

这不是一个令人满意的解决方案，但它是迄今为止我发现的唯一工作方式。我已经更新了源代码以包含解决方案。

聚合物1.0 dom-repeat与嵌套元素

1 个答案: