Javascript 在聚合物元素之间共享数据更改_Javascript_Polymer

Javascript 在聚合物元素之间共享数据更改

javascript polymer

Javascript 在聚合物元素之间共享数据更改,javascript,polymer,Javascript,Polymer,我有一个页面，我想包括三个独立的视图，一个显示所有数据，另一个在同一组数据上有不同的摘要我正在寻找一种方法，将每个视图表示为一个聚合元素，并在数据更改时更新每个视图。这些更改将更改存储在数组中的对象的属性值。组件之间共享的是阵列我发现了一种方法，当数据发生变化时触发一个事件，在组件外部监听它，然后调用notifyPath——但它有点笨拙，而且可能更难，因此当我将代码扩展到其当前状态时，我会使用两个聚合元素进行一个简单的演示，其中一个是针对最终目标的只读三个元素，所有这些元素都可以读取和写入数

我有一个页面，我想包括三个独立的视图，一个显示所有数据，另一个在同一组数据上有不同的摘要

我正在寻找一种方法，将每个视图表示为一个聚合元素，并在数据更改时更新每个视图。这些更改将更改存储在数组中的对象的属性值。组件之间共享的是阵列

我发现了一种方法，当数据发生变化时触发一个事件，在组件外部监听它，然后调用notifyPath——但它有点笨拙，而且可能更难，因此当我将代码扩展到其当前状态时，我会使用两个聚合元素进行一个简单的演示，其中一个是针对最终目标的只读三个元素，所有这些元素都可以读取和写入数据

有没有比这更简单的方法在组件之间共享更改

index.html 示例-one.html 示例2.html

以上代码可能与聚合物方式类似。没有通知路径

索引html:

<html>

 <body> 

<dom-module id="my-test">
<template>
<style>
    :host {
      display: block;
      text-align: center;
    }
</style>
  <body>
    <h1>One</h1>
    <example-one data={{data}}></example-one>
    <h1>Two</h1>
    <example-two data={{data}}></example-two>
  </body>


</template> 
</dom-module>



<my-test></my-test>

</body>
</html>

示例-one.html：

示例2.html是：

可能重复的

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<dom-module id="example-one">
    <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <table>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <td>{{item.name}}</td>
                <td>{{item.amount}}</td>
            </tr>
        </template>
    </tbody>
    </table>
    </template>

    <script>
        class ExampleOne extends Polymer.Element {
            static get is() {
                return 'example-one';
            }
            static get properties() {
                return {
                    data: {
                        type: Array,
                        notify: true,
                        value() {
                            return [];
                        }
                    }
                };
            }
        }

        window.customElements.define(ExampleOne.is, ExampleOne);
    </script>
</dom-module>

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/polymer/lib/elements/dom-repeat.html">

<dom-module id="example-two">
    <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <table>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <td>{{item.name}}</td>
                <td><input value="{{item.amount::input}}"></td>
            </tr>
        </template>
    </tbody>
    </table>
    </template>

    <script>
        class ExampleTwo extends Polymer.Element {
            static get is() {
                return 'example-two';
            }
            static get properties() {
                return {
                    data: {
                        type: Array,
                        notify: true,
                        value() {
                            return [];
                        }
                    }
                };
            }
            static get observers() {
                return [
                    'arrayChanged(data.*)'
                ]
            }
            arrayChanged(data) {
                console.log("Changed!");
                this.dispatchEvent(new CustomEvent("there-is-a-change", {
                    detail: {
                        path: data.path
                    }
                }));
            }

        }

        window.customElements.define(ExampleTwo.is, ExampleTwo);
    </script>
</dom-module>

<html>

 <body> 

<dom-module id="my-test">
<template>
<style>
    :host {
      display: block;
      text-align: center;
    }
</style>
  <body>
    <h1>One</h1>
    <example-one data={{data}}></example-one>
    <h1>Two</h1>
    <example-two data={{data}}></example-two>
  </body>


</template> 
</dom-module>



<my-test></my-test>

</body>
</html>

<dom-module id="example-one">
    <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <table>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <td>{{item.name}}</td>
                <td>{{item.amount}}</td>
            </tr>
        </template>
    </tbody>
    </table>
    </template>
    <script>
 class ExampleOne extends Polymer.Element {
            static get is() { return 'example-one'; }
            static get properties() {
                return {
                    data: {
                        type: Array,
                        notify: true,
                        value() {
                            return [{ name: "Alice",
                                      amount: 100
                                      }, {
                                      name: "Bob",
                                      amount: 200          }];
                        }
                    }
                };
            }
        }

        window.customElements.define(ExampleOne.is, ExampleOne);
   </script>
</dom-module>

<dom-module id="example-two">
    <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <table>
    <tbody>
        <template is="dom-repeat" items="{{data}}">
            <tr>
                <td>{{item.name}}</td>
                <td><input value="{{item.amount::input}}"></td>
            </tr>
        </template>
    </tbody>
    </table>
    </template>
<script>
class ExampleTwo extends Polymer.Element {
            static get is() {
                return 'example-two';
            }
            static get properties() {
                return {
                    data: {
                        type: Array,
                        notify: true,
                        value() {
                            return [];
                        }
                    }
                };
            }
        }
        window.customElements.define(ExampleTwo.is, ExampleTwo);
</script>
</dom-module>