Javascript dom重复中的项目更改未与其他项目通信

我们正在构建一个聚合物应用程序。 我们有一个元素数组，这些元素使用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>

//主要组件
要素清单
（我可以让JSFIDLE正确地处理依赖项…）

到目前为止，我一直在努力调查


听众
通知路径
观察员

没有成功。
我还希望避免将整个数组传递给我的项目

我知道使用诸如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>


：主持人{
显示：块；
}
例子
要素清单
var fred={“name”：“fred”}；
var tom={“name”：“tom”}；
聚合物({
是：'示例组件'，
特性：{
要素：{
类型：数组，
值：[{“name”：“Main1”，“person”：fred}，{“name”：“Main2”，“person”：tom}，{“name”：“Main3”，“person”：fred}]，
通知：正确
}
}
});

子组件

<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>




：主持人{
显示：块；
}
{{element.name}
{{element.person.name}
改名！
聚合物({
是‘另一个组件’，
特性：{
要素：{
类型：对象，
通知：正确
}
},
_changeName:function（）{
this.set（'element.person'，{“name”：“bobby”}）；
this.notifyPath（'elements'）；
this.notifyPath（'element'）；
this.notifyPath（'element.person'）；
}
});

谢谢，
您可能希望实际执行更改的元素触发一个事件，表明它更改了值。然后让父元素侦听它，当它接收到一个已更改的事件时，它可以执行
this.notifyPath（'elements'）呼叫

在对notifyPath的调用中，您传递的是对象，但它应该是字符串路径而不是对象。
您可能希望实际执行更改的元素触发一个事件，表明它更改了值。然后让父元素侦听它，当它接收到一个已更改的事件时，它可以执行
this.notifyPath（'elements'）呼叫

在对notifyPath的调用中，您正在传入对象，但它应该是字符串路径而不是对象。
子组件没有更改父组件的值。正如Jacob Miles所建议的，您需要触发一个事件来更改值。然后从父元素中侦听，在父元素中可以通知整个元素数组的更改

以下是plnkr链接：

子组件，即另一个组件正在触发事件“更改名称”：

this.fire（'change-name'，{“newPersonName”：“bobby”，“index”：this.i}）

父组件，即
示例组件
正在侦听该事件并通知更改：

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'); 
     }

 });

this.addEventListener（'change-name'，函数（e）{
this.elements[e.detail.index].person.name=e.detail.newPersonName；
for（var i=0；i

要通知，我们需要使用更改的确切路径，因此我将
notifyPath
保持在循环中（我没有找到其他方法）。我希望这会有所帮助。
子组件不会更改父组件的值。正如Jacob Miles所建议的，您需要触发一个事件来更改值。然后从父元素中侦听，在父元素中可以通知整个元素数组的更改

以下是plnkr链接：

子组件，即另一个组件正在触发事件“更改名称”：

this.fire（'change-name'，{“newPersonName”：“bobby”，“index”：this.i}）

父组件，即
示例组件
正在侦听该事件并通知更改：

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'); 
     }

 });

this.addEventListener（'change-name'，函数（e）{
this.elements[e.detail.index].person.name=e.detail.newPersonName；
for（var i=0；i

要通知，我们需要使用更改的确切路径，因此我将
notifyPath
保持在循环中（我没有找到其他方法）。我希望这能有所帮助。
嘿，谢谢你的回答。我已经修复了使用字符串的方法。在我的原始代码中也有这样的代码，但在构建这个示例时忘记了它们。我也尝试过通知元素，但没有成功。谢谢Jacob。昨天晚上读了几遍你的评论后，我开始明白你的意思了。但只有Ofisora提到notifyPath，我才能让它工作。嘿，谢谢你的回答。我已经修复了使用字符串的方法。在我的原始代码中也有这样的代码，但在构建这个示例时忘记了它们。我也尝试过通知元素，但没有成功。谢谢Jacob。昨天晚上读了几遍你的评论后，我开始明白你的意思了。但只有Ofisora提到notifyPath，我才能让它工作。嘿，我昨天晚上开始玩活动，我觉得这确实是一条路。但是，我不喜欢您的示例中的数据在数组级别发生变化(
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'); 
     }

 });