我们正在构建一个 polymer 应用程序。 我们有一个元素数组,它们使用dom-repeat显示在组件中。这是一个示例片段:
//main component
<h2>List of elements</h2>
<template is="dom-repeat" items="{{elements}}" as="item" indexAs="index">
<another-component element="{{item}}" ident$="{{index}}"></another-component>
</template>
和
//sub component
<h3>{{element.name}}</h3>
<h4>{{element.person.name}}</h4>
<paper-button on-tap="_changeName">Change name!</paper-button>
数组的对象有一些共同的引用。你可以像这样看到它们:
//main component
<script>
var fred = {"name": "fred"};
var tom = {"name": "tom"};
Polymer({
is: 'example-component',
properties: {
elements: {
type: Array,
value: [{"name": "Main1", "person": fred}, {"name": "Main2", "person": tom}, {"name": "Main3", "person": fred}],
notify: true
}
}
});
</script>
现在,在我的项目中,我希望能够更改嵌套元素。
在此示例中,我希望更改第 3 项的人员值。
但是由于第 3 项的人员引用与第 1 项相同,我也希望第 1 项的人员发生变化。
但是,我的经验是第 1 项没有更新。
There is a complete example setup at this address. (我可以让 jsfiddle 正确处理我的依赖项...)。
到目前为止我已经尝试过调查
- 听众
- 通知路径
- 观察员
没有成功。 我还想避免将整个数组传递给我的项目。
我知道使用像 Redux 这样的状态对象可以很容易地解决这个问题,所以不幸的是这不是这里的解决方案。
我在互联网上找到了很多关于如何使数据向下冒泡的资源,而不是像我现在尝试做的那样向上冒泡。
如有任何帮助,我们将不胜感激。
<小时/>完整代码供引用:
主要组件
<link rel="import" href="/polymer/polymer.html">
<link rel="import" href="/components/another-component/another-component.html">
<dom-module id="example-component">
<template>
<style>
:host {
display: block;
}
</style>
<h1>Example</h1>
<h2>List of elements</h2>
<template is="dom-repeat" items="{{elements}}" as="item" indexAs="index">
<another-component element="{{item}}" ident$="{{index}}"></another-component>
</template>
</template>
<script>
var fred = {"name": "fred"};
var tom = {"name": "tom"};
Polymer({
is: 'example-component',
properties: {
elements: {
type: Array,
value: [{"name": "Main1", "person": fred}, {"name": "Main2", "person": tom}, {"name": "Main3", "person": fred}],
notify: true
}
}
});
</script>
</dom-module>
子组件
<dom-module id="another-component">
<template>
<style>
:host {
display: block;
}
</style>
<h3>{{element.name}}</h3>
<h4>{{element.person.name}}</h4>
<paper-button on-tap="_changeName">Change name!</paper-button>
</template>
<script>
Polymer({
is: 'another-component',
properties: {
element: {
type: Object,
notify: true
}
},
_changeName: function(){
this.set('element.person', {"name": "bobby"});
this.notifyPath('elements');
this.notifyPath('element');
this.notifyPath('element.person');
}
});
</script>
</dom-module>
谢谢
最佳答案
子组件不会更改父组件的值。正如 Jacob Miles 所建议的,您需要触发一个事件来更改该值。然后从父元素监听,可以通知整个 elements 数组的变化。
这是 plnkr 链接:http://plnkr.co/edit/tuqKh4ANUTspa05GZ9mi?p=preview
子组件,即另一个组件
正在触发事件“change-name”:
this.fire('change-name', {"newPersonName": "bobby","index":this.i });
。
父组件,即example-component
正在监听该事件并通知更改:
this.addEventListener('change-name', function (e) {
this.elements[e.detail.index].person.name = e.detail.newPersonName;
for(var i =0; i< this.elements.length; i++){
this.notifyPath('elements.'+i+'.person.name');
}
});
为了通知我们需要使用更改的确切路径,所以我将 notifyPath
保留在循环中(我没有找到其他方法)。我希望这会有所帮助。
关于javascript - dom-repeat 中的项目更改未传达给其他项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45716899/