这似乎与我之前提到的问题相似:In Polymer 2.0 how to observe edits to properties of an object bound to an element inside dom-repeat?
但事实并非如此。代码示例类似,但问题是关注该代码的不同方面。
以下是示例代码:https://plnkr.co/edit/iTZqM4GwpASEqQgtRGEk
列表元素:
<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 description="{{item.description}}">
</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.unshift("list", {
description:"three"
})
}.bind(this), 1000)
}
}
customElements.define(ListElement.is, ListElement);
</script>
</dom-module>
编辑元素:
<dom-module id="editor-element">
<template>
<div>Editor for [[description]]</div>
</template>
<script>
class EditorElement extends Polymer.Element {
static get is() {
return "editor-element";
}
static get properties() {
return {
description:String
}
}
static get observers() {
return [
"observe(description)"
]
}
observe(description) {
console.log("Observed change for TODO item: "+description);
}
}
customElements.define(EditorElement.is, EditorElement);
</script>
</dom-module>
在list(parent)元素中,将两个待办事项项目推送到数组上,第一个项目被修改,然后第三个项目未被移位到数组中。
编辑器(子)元素中的观察者被推动两次以进行推送,一次被编辑。到现在为止还挺好。然后它会被触发三次以进行非移位。
我理解这背后的逻辑,不移位扰乱了数据和元素之间的映射,这些映射被重新用于渲染新分配的数据。
我的问题是:
如何编写一个能够区分由数组重组触发的观察结果的观察者与通过编辑该数组中某个项目的属性触发的观察结果?
Unshift足以说明这一点,但如果dom-repeat应用了排序或过滤器,则会发生同样的事情。
只是为了澄清,我既不是在这里,也不是因为在每个 dom-repeated元素。然而重要的是,我可以将可观察到的变化与一个特定子元素中的属性变异区分开来。在示例代码中显示的方法中,我不能,所以这可能意味着我在这里采用了错误的数据绑定方法。