Polymer 如何区分父元素中对数组的结构更改与子元素中对数组项的属性更改?
这似乎与我之前提出的一个问题类似: 但事实并非如此。代码示例类似,但问题集中在代码的不同方面 下面是示例代码: 列表元素:Polymer 如何区分父元素中对数组的结构更改与子元素中对数组项的属性更改?,polymer,Polymer,这似乎与我之前提出的一个问题类似: 但事实并非如此。代码示例类似,但问题集中在代码的不同方面 下面是示例代码: 列表元素: <link rel="import" href="./editor-element.html"> <dom-module id="list-element"> <template> <dom-repeat items="{{list}}" as="item"> <temp
<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>
类ListElement扩展了Polymer.Element{
静态get是(){
返回“列表元素”;
}
静态获取属性(){
返回{
名单:{
类型:数组,
值:函数(){
返回[]
}
}
}
}
就绪(){
super.ready();
这个.push(“列表”{
描述:“一个”
})
这个.push(“列表”{
描述:“两个”
})
setTimeout(函数(){
此.set(“list.0.description”,“一次编辑”);
}.绑定(这个),500)
setTimeout(函数(){
此.unshift(“列表”{
描述:“三”
})
}.绑定(这个),1000)
}
}
customElements.define(ListElement.is,ListElement);
和编辑器元素:
<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>
[[说明]]的编辑器
类EditorElement扩展了Polymer.Element{
静态get是(){
返回“编辑器元素”;
}
静态获取属性(){
返回{
描述:字符串
}
}
静态获取观察器(){
返回[
“遵守(说明)”
]
}
观察(描述){
console.log(“观察到的TODO项更改:”+说明);
}
}
定义(EditorElement.is,EditorElement);
在list(parent)元素中,将两个todo项推送到数组中,修改第一个todo项,然后将第三个todo项取消移动到数组中
对于推送,编辑器(子)元素中的观察者被触发两次,对于编辑,被触发一次。到现在为止,一直都还不错。然后,它会被触发三次以进行取消移动
我理解这背后的逻辑,反移位扰乱了数据和元素之间的映射,它们被重新用于呈现新分配的数据
我的问题是:
如何编写一个观察者来区分由数组重构触发的观察和由编辑该数组中某个项的属性触发的观察
Unshift足以说明这一点,但如果dom repeat应用了排序或过滤器,也会发生同样的情况
只是为了澄清,我不在这里也不在那里,因为在父元素的数组中添加one项会导致每个子元素都发生明显的变化。然而,重要的是,我可以将可观察到的变化与一个特定子元素中属性的突变区分开来。在示例代码中显示的方法中,我不能,因此这可能意味着我在这里采用了错误的数据绑定方法