3

（此问题和代码示例适用于 Polymer 2，但 1.x 中可能存在相同的问题）

目标：

我想创建一个允许查看/编辑某些类型对象的属性的元素（编辑器），以及另一个显示这些对象的可编辑数组的元素（列表），将查看/编辑委托给编辑器元素，而保留对从列表中添加/删除对象的控制。待办事项列表就是一个很好的例子（注意：据我所知，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，则编辑器中的待办事项属性观察器会被触发 3 次，每个新的/现有的项目都会触发一次。无论新项目是否被推入/移入列表，都会发生这种情况。我从 Polymer 2 松弛通道的讨论中了解到，unshift 行为是意料之中的，但 push 行为是出乎意料的。

问题：

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

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

4

1 回答 1

1

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

FWIW，Polymer 1.x 中不会出现该问题（即，仅针对新添加的项目调用观察者），如本演示所示：

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>

于 2017-03-03T02:07:34.303 回答