javascript - dom-repeat 中的项目更改未传达给其他项目

Question

我们正在构建一个 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>

谢谢

Answer 1

子组件不会更改父组件的值。正如 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 保留在循环中(我没有找到其他方法)。我希望这会有所帮助。