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

Question

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

目标：

我想创建一个允许 viewing/editing 某些类型对象的属性的元素（编辑器），以及另一个显示这些对象的可编辑数组的元素（列表），委派 viewing/editing 到编辑器元素，同时保留对列表中对象的 addition/removal 的控制。待办事项列表就是一个很好的例子（注意：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，则编辑器中的待办事项属性观察器会被触发三次，每个 new/existing 项目一次。无论新项目是被推送还是未移动 onto/into 列表，都会发生这种情况。我从 Polymer 2 slack 频道的讨论中了解到，unshift 行为是可以预料的，但 push 行为是意外的。

问题：

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

我的问题的答案可能是 "Polymer can't do this"，也可能是 "You are misunderstanding something fundamental about Polymer"，我很想知道其中一个或两个，所以如果我遗漏了一些重要的东西，请直截了当。不过，希望有一种聚合物方法可以满足我的要求。

Answer 1

您在 2.0 中的观察者用法似乎已经正确，我认为您可能在 2.0-preview 分支中发现了一个错误。我建议为此创建一个 GitHub issue，这样 Polymer 团队就可以 confirm/clarify.

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>

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

In Polymer 2.0 how to observe edits to properties of an object bound to an element inside dom-repeat?

polymer

polymer-2.x