具有嵌套元素的 Polymer 1.0 dom-repeat答案

【问题标题】：Polymer 1.0 dom-repeat with nested elements具有嵌套元素的 Polymer 1.0 dom-repeat
【发布时间】：2015-08-26 10:16:08
【问题描述】：

我有一个关于 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-elements 到属性的数组。访问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 应该重绘自己，但它没有发生。 documentation 表示您可以使用 dom-repeat.observe 或 dom-repeat.render
更新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>

我已将我的源代码推送到 github source 和 live demo

感谢您的帮助。桑德罗

【问题讨论】：

根据我对文档的理解，您只需将observed 属性添加到第一个observe 属性：observe="values.splice value.myotherproperty"
你试过用“notifyPath”方法吗？

标签： polymer

【解决方案1】：

我找到了让它工作的技巧。我需要更改包含所有项目的数组。每次更改 item-element 时都会调用函数 _itemElementChanged。

_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 最终会是空的。

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

【讨论】：