当数据更改时，如何更新聚合物 1.x 中的 DOM?

Question

我是聚合物的新手，来自Angular背景，数据使用服务在组件之间共享。

我有两个视图(窗体视图和显示视图(，我想共享"存储"在另一个称为数据存储的元素中的对象中的数据。

这是褶皱机

窗体视图

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

显示视图

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

我基本上希望在更改窗体视图上的输入时更新显示视图。

如果打开 plunker，您将看到窗体视图和显示视图都显示数据存储中名称和城市的原始值。

我如何绑定它们：

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

当我更改任一输入时，数据存储中的观察点会触发"_dataChanged"函数，但更改不会在显示视图中更新。

但是，如果在"表单视图"上进行更改后单击显示视图上的"获取数据"按钮，您将看到更改显示在formData对象(在控制台.log中(上，而不是在视图中。我什至尝试使用：

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

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

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

谢谢！

Answer 1

聚合物实现了mediator pattern，其中主机元素管理 数据在自身与其本地 DOM 节点之间流动。

当两个元素与数据绑定连接时，数据更改可以向下流动，从主机流向目标，向上，从目标流向主机，或 两种方式。

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

因此，在上面的代码中，您尝试使数据在三个目标或子元素之间流动，即在data-store、form-view和display-view之间。这就是为什么数据没有以display-view呈现的原因。如果data-store将属性存储在本地存储中，并且其他元素使用该存储来拉取该属性，则会显示该属性。这是完成您正在寻找的一种方法。

另一种方法是从主机元素(即从parent-view传递formData。您可以简单地执行以下操作：

<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=preview。