更改数据后，如何更新聚合物1.x中的DOM? [英] How do I update the DOM in polymer 1.x when data is changed?

问题描述

我是Polymer的新手，来自Angular背景，在其中使用服务在组件之间共享数据.

I am new to Polymer and come from an Angular background where data is shared between components using services.

我有两个视图(form-view和display-view)，我希望共享存储"在另一个称为数据存储的元素中的对象中的数据.

I have two views (form-view and display-view) that I would like to share the data that is "stored" in an object in another element called data-store.

这是 plunker

表单视图

<dom-module id="form-view">

      <template>

        <style>
          :host {
            display: inline-block;
          }
        </style>

        <h1>Form View</h1>
        <label for="form-name">Name</label>
        <input id="form-name" value="{{formData.name::change}}">
        <label for="form-city">City</label>
        <input id="form-city" value="{{formData.city::change}}">

        <data-store form-data="{{formData}}"></data-store>
      </template>



      <script>
      Polymer({
        is: 'form-view',
        ready: function() {
          console.log("FORM VIEW", this.formData);
        },
        properties: {
          formData: {
            type: Object
          }
        }
      });
      </script>

    </dom-module>

显示视图

display-view

      <template>

        <style>
          :host {
            display: inline-block;
          }
        </style>
        <h1>Display View</h1>
        <h4>Name: {{formData.name}}</h4>
        <h4>City: {{formData.city}}</h4>
        <button id="getData">Get Data</button>
        <data-store form-data="{{formData}}"></data-store>
      </template>

      <script>
      Polymer({
        is: 'display-view',
        properties: {
          formData: {
            type: Object
          }
        },
        ready: function(){
          var that = this;
          console.log('display view', this.formData);

          this.$.getData.addEventListener('click', function(evt) {
            console.log("Form Data from store", that.formData);
            that.set('formData.name', that.formData.name);
            that.set('formData.city', that.formData.city);
          })
        }
      });
      </script>

    </dom-module>

数据存储

    <dom-module id="data-store">

      <template>

        <style>
          :host {
            display: inline-block;
          }
        </style>

      </template>

      <script>
      Polymer({
        is: 'data-store',
        properties: {
          formData: {
            type: Object,
            notify: true,
            value: {
              name: 'Hello',
              city: 'World'
            }
         }
        },
        observers: ['_dataChanged(formData.*)'],
        _dataChanged: function(change) {
          console.log("DATA CHANGED", change);
          console.log("Form Data", this.formData);
        }

      });
      </script>

    </dom-module>

我基本上希望每当更改表单视图上的输入时都更新显示视图.

I basically want to the display-view to be updated whenever I change an input on the form-view.

如果打开插头，您将看到form-view和display-view都显示了数据存储区中name和city的原始值.

If you open plunker you will see that the form-view and display-view both show the original values for name and city from the data-store.

我如何绑定它们:

<data-store form-data="{{formData}}"></data-store>

当我更改任一输入时，数据存储区中的观察者将触发"_dataChanged"功能，但更改不会在显示视图上更新.

When I change either one of the inputs, the observer in the data-store fires the '_dataChanged' function, but the change is not updated on the display-view.

但是，如果在表单视图"上进行更改后单击显示视图上的获取数据"按钮，则会看到更改显示在formData对象上(在console.log中)只是不在视野中.我什至尝试使用:

However, if you click on the "get data" button on the display-view after making a change on the "form-view" you will see that the change shows up on the formData object (in the console.log) just not in the view. I even tried to use:

  this.set('formData.name', this.formData.name);

即使这样也不会更新显示视图上的值.

Even this won't update the value on the display-view.

有人可以帮我理解为什么我的数据没有被更新，以及如何更新一个视图上的输入并使绑定到同一对象的所有其他视图上的输入改变吗?

Can someone help me understand why my data is not being updated and how I can update an input on one view and have it change on all other views that are bound to the same object?

谢谢！

推荐答案

Polymer实现mediator pattern，由主机元素管理 自身与其本地DOM节点之间的数据流.

Polymer implements the mediator pattern, where a host element manages data flow between itself and its local DOM nodes.

当两个元素通过数据绑定连接时，数据更改可以 从主机到目标，向下，从目标到主机，向下 两种方式.

When two elements are connected with a data binding, data changes can flow downward, from host to target, upward, from target to host, or both ways.

当本地DOM中的两个元素绑定到相同的属性数据时 似乎是从一个元素流到另一个元素，但是这个流是 由主持人调解.一个元素所做的更改会传播到 主机，然后主机将更改传播到第二个主机 元素.

When two elements in the local DOM are bound to the same property data appears to flow from one element to the other, but this flow is mediated by the host. A change made by one element propagates up to the host, then the host propagates the change down to the second element.

因此，在上面的代码中，您试图使数据在三个目标或子元素之间(即，在data-store，form-view和display-view之间)流动.这就是为什么数据未在display-view中呈现的原因.如果data-store已将该属性存储在localstorage中，并且其他元素使用该存储来拉出该属性，则将显示该信息.那是做您想要的事情的一种方法.

So, in the above code you were trying to make data flow between three target or child elements i.e. between data-store, form-view and display-view. That is why the data is not rendering in display-view. It would have displayed if data-store have stored the property in localstorage and other elements used that storage to pull that property. That is one way to do what you are looking for.

另一种方法是从主机元素(即从parent-view)传递formData.您可以简单地做到:

Another way is to pass the formData from host element i.e. from parent-view. You can simply do:

<data-store form-data="{{formData}}"></data-store>
<iron-pages selected="[[routeName]]" attr-for-selected="name">
  <form-view form-data="{{formData}}" name="form"></form-view>
  <display-view form-data="{{formData}}" name="display"></display-view>
</iron-pages>

签入plnkr: https://plnkr.co/edit/KLw8G04qVPVPmderLlzd?p=预览.

这篇关于更改数据后，如何更新聚合物1.x中的DOM?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！