Que*_*tin -6 javascript polymer
我有一个页面，我想在同一页面上包含三个单独的视图（一个显示所有数据，另一个显示不同的摘要）。
我正在寻找一种将每个视图表示为Polymer元素的方法，并且每当数据发生更改时都对每个视图进行更新。这些更改将涉及存储在数组中的对象的属性值。组件之间共享的是阵列。
我发现了一种方法，该方法可以通过在数据发生更改时触发事件，在组件外部侦听然后调用来起作用，notifyPath但是这种方法有些笨拙，而且随着我将代码扩展到当前的程度，可能会更多状态（一个简单的演示，其中包含两个Polymer元素，其中一个是只读的）到最终目标（三个元素，所有这些元素都可以读写数据）。
有没有比这更简单的方法来共享组件之间的更改？
<!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>
<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>
上面的代码可能以Polymer方式这样。没有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>
| 归档时间： |
|
| 查看次数： |
317 次 |
| 最近记录： |