Above codes may like this with Polymer way. without notifyPath.
DEMO
index 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>
And example-two.html is:
<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>