Question

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

目标：

我想创建一个允许查看/编辑某些类型对象属性的元素（编辑器），以及显示这些对象的可编辑数组的另一个元素（List），将查看/编辑委派给编辑器元素，同时保持对列表中的obejcts的添加/删除的控制。待办事项列表是一个很好的例子（注意：聚合物待办事项列表示例浮动在那里，据我所知，不要做我需要的，阅读以了解原因）。我试图在Polymer 2.0中做到这一点，但目前尚不清楚该问题是否特定于2.0。

障碍：

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

https://plnkr.co/edit/Yji9kl63sOdnHJiv4CCU

List元素：

<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松弛通道的讨论中理解，预计会出现非移位行为，但推送行为是出乎意料的。

问题：

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

我的问题的答案可能是“聚合物不能做到这一点”或者它可能是“你误解了聚合物的基本原因”，我想知道其中一种或两种，所以如果我能请我直截了当我错过了重要的事情。但是，希望有一种聚合方式来做我想问的事。

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>

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

1 个答案: