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. I'm looking for a way to represent
Solution 1:
Above codes may like this with Polymer way. without notifyPath.
index html:
<html><body><dom-moduleid="my-test"><template><style>:host {
display: block;
text-align: center;
}
</style><body><h1>One</h1><example-onedata={{data}}></example-one><h1>Two</h1><example-twodata={{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><templateis="dom-repeat"items="{{data}}"><tr><td>{{item.name}}</td><td>{{item.amount}}</td></tr></template></tbody></table></template><script>classExampleOneextendsPolymer.Element {
staticgetis() { return'example-one'; }
staticgetproperties() {
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>
And example-two.html is:
<dom-module id="example-two">
<template><style>:host {
display: block;
}
</style><table><tbody><templateis="dom-repeat"items="{{data}}"><tr><td>{{item.name}}</td><td><inputvalue="{{item.amount::input}}"></td></tr></template></tbody></table></template><script>classExampleTwoextendsPolymer.Element {
staticgetis() {
return'example-two';
}
staticgetproperties() {
return {
data: {
type: Array,
notify: true,
value() {
return [];
}
}
};
}
}
window.customElements.define(ExampleTwo.is, ExampleTwo);
</script></dom-module>
Post a Comment for "Sharing Changes To Data Between Polymer Elements"