在Polymer元素之间共享数据更改 [英] Sharing changes to data between Polymer elements
问题描述
我有一个页面，我想在同一数据集上包含三个单独的视图(一个显示所有数据，另一个显示不同的摘要).
I have a page where I want to include three separate views (one showing all the data and ones with different summaries) on the same set of data.
我正在寻找一种将每个视图表示为Polymer元素的方法，并且每当数据更改时，每个视图都会更新.这些更改将涉及存储在数组中的对象的属性值.这是组件之间共享的数组.
I'm looking for a way to represent each view as a Polymer element and have each one update whenever the data changes. These changes will be to the values of properties of objects which are stored in an array. It is the array that is shared between the components.
我发现了一种方法，该方法可以通过在数据发生更改时触发事件，在组件外部侦听然后调用notifyPath来工作，但是这种方法有些笨拙，而且可能会更麻烦我将代码的当前状态(带有两个Polymer元素的简单演示，其中一个为只读)扩展到最终目标(三个元素，所有这些元素均可读写数据).
I've found an approach that works by firing an event when there is a change to the data, listening for it outside the components, and then calling notifyPath — but it is somewhat unwieldy and likely to be more so as I grow my code its current state (a simple demo with two Polymer elements, one of which is readonly) to the end goal (three elements, all of which can read and write to the data).
有没有比这更简单的方法来共享组件之间的更改?
Is there a simpler way to share changes between components than this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>polymer-test</title>
<script>
(function() {
var data = [{
name: "Alice",
amount: 100
}, {
name: "Bob",
amount: 200
}];
document.addEventListener('WebComponentsReady', function() {
document.querySelector('example-one').data = data;
document.querySelector('example-two').data = data;
document.querySelector('example-two').addEventListener('there-is-a-change', function(e) {
document.querySelector('example-one').notifyPath(e.detail.path);
})
});
})();
</script>
<script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="/src/polymer-test-app/example-one.html">
<link rel="import" href="/src/polymer-test-app/example-two.html">
</head>
<body>
<h1>One</h1>
<example-one></example-one>
<h1>Two</h1>
<example-two></example-two>
</body>
</html>
example-one.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>
example-two.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-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>
推荐答案
以上代码可能采用Polymer方法.没有notifyPath.
Above codes may like this with Polymer way. without notifyPath.
索引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>
example-one.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>
example-two.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 [];
}
}
};
}
}
window.customElements.define(ExampleTwo.is, ExampleTwo);
</script>
</dom-module>
这篇关于在Polymer元素之间共享数据更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
