polymer - 在 Polymer 2.0 中如何观察对绑定(bind)到 dom-repeat 内元素的对象的属性的编辑？

Question

(这个问题和代码示例是针对 Polymer 2 的，但 1.x 中可能存在同样的问题)

目标:

我想创建一个允许查看/编辑某些类型对象的属性的元素(编辑器)，以及另一个显示这些对象的可编辑数组的元素(列表)，将查看/编辑委托(delegate)给编辑器元素，同时保留对从列表中添加/删除对象的控制。待办事项列表就是一个很好的例子(注意:Polymer 待办事项列表示例四处飘荡，据我所知，不要做我需要做的事，请继续阅读以了解原因)。我正在尝试在 Polymer 2.0 中执行此操作，但尚不清楚该问题是否特定于 2.0。

障碍:

首先，这里有一些关于 plunker 的代码:

https://plnkr.co/edit/Yji9kl63sOdnHJiv4CCU

列表元素:

<link rel="import" href="./editor-element.html">

<dom-module id="list-element">
    <template>
        <dom-repeat items="{{list}}" as="item">
            <template>
                <div class="item">
                    <editor-element todo="{{item}}">
                    </editor-element>
                </div>
            </template>
        </dom-repeat>

    </template>
    <script>

        class ListElement extends Polymer.Element {

            static get is() {
                return "list-element";
            }

            static get properties() {
                return {
                    list: {
                        type: Array,
                        value:function() {
                            return []
                        }
                    }
                }
            }

            ready() {
                super.ready();
                this.push("list", {
                    description:"one"
                })
                this.push("list", {
                    description:"two"
                })
                setTimeout(function() {
                    this.set("list.0.description", "one edited");
                }.bind(this), 500)
                setTimeout(function() {
                    this.push("list", {
                        description:"three"
                    })
                }.bind(this), 1000)
            }
        }

        customElements.define(ListElement.is, ListElement);

    </script>
</dom-module>

编辑器元素:

<dom-module id="editor-element">
    <template>
        <div>Editor for [[todo.description]]</div>
    </template>
    <script>

        class EditorElement extends Polymer.Element {

            static get is() {
                return "editor-element";
            }

            static get properties() {
                return {
                    todo:{
                        type:Object,
                        value:function() {
                            return {};
                        }
                    }
                }
            }

            static get observers() {
                return [
                    "observe(todo.description)"
                ]
            }

            observe(p1) {
                console.log("Observed change for TODO item description: "+p1);
            }
        }

        customElements.define(EditorElement.is, EditorElement);

    </script>
</dom-module>

问题在于，除了编辑现有待办事项之外，当创建新待办事项时，编辑器中本应监视待办事项编辑的观察者也会被触发.对于新的待办事项和尚未编辑的现有待办事项，都会发生这种情况。换句话说，如果列表中已有项目 A 和 B，并且我添加了项目 C，则编辑器中的待办事项观察器会被触发三次，每个新项目/现有项目一次。无论新项目是被插入还是未转移到列表中，都会发生这种情况。我从 Polymer 2 slack channel 的讨论中了解到，unshift 行为是可以预料的，但 push 行为是意外的。

问题:

实现此用例的 Polymer Way(最好是 2.0)是什么？我不想用处理对待办事项的编辑的代码来污染 List 元素。 to-do items 本身就是对象，以后可能会获得更多的属性，所以我不想将 dom-repeated item 的每个属性单独绑定(bind)到 Editor 元素中的一个属性，因为这是代码维护的麻烦。我只想在每次 dom-repeat 中绑定(bind)整个待办事项，并允许编辑器处理哪些属性是可编辑的以及如何编辑。

我的问题的答案可能是“Polymer 不能做到这一点”，或者可能是“您误解了 Polymer 的一些基本知识”，我很想知道其中一个或两个，所以如果我想知道，请直截了当我错过了一些重要的东西。不过，希望有一种聚合方法可以满足我的要求。

Answer 1

您在 2.0 中对观察者的使用似乎已经正确了，我认为您可能会在 2.0-preview 分支中看到一个错误。我建议创建一个 GitHub issue为此，Polymer 团队可以确认/澄清。

FWIW，这个问题不会出现在 Polymer 1.x 中(即，观察者只会为新添加的项目调用)，如 demo 所示:

HTMLImports.whenReady(() => {
  class EditorElement {
    beforeRegister() {
      this.is = 'editor-element';
      this.properties = {todo: Object};
      this.observers = ["observe(todo.description)"];
    }

    observe(p1) {
      console.log("Observed change for TODO item description: "+p1);
    }
  }
  Polymer(EditorElement);

  class ListElement {
    beforeRegister() {
      this.is = 'list-element';

      this.properties = {
        list: {
          type: Array,
          value: () => []
        }
      };
    }

    _pushItem() {
      this.push("list", {description: `item ${this.list.length}`});
    }
  }
  Polymer(ListElement);
});

<head>
  <base href="https://polygit.org/polymer+1.8.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <list-element></list-element>

  <dom-module id="editor-element">
    <template>
      <div>Editor for [[todo.description]]</div>
    </template>
  </dom-module>
  
  <dom-module id="list-element">
    <template>
      <button on-click="_pushItem">Push item</button>

      <template is="dom-repeat" items="{{list}}">
        <div class="item">
          <editor-element todo="{{item}}">
          </editor-element>
        </div>
      </template>
    </template>
  </dom-module>

</body>