Sibling Items Sharing Array attribute
Polymer 1.0 Testing how to observe a property (Array) of a bound variable (object). Couldn't figure it out, so simply added the array as another property.
by jamstooks
HTML
<script src="https://elements.polymer-project.org/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="https://raw.githubusercontent.com/Polymer/polymer/master/polymer.html">
<dom-module id="source-element">
<template>
<b>Source Element</b>
<template is="dom-repeat" items="{{items}}" as="item">
<p>{{item}}</p>
</template>
<button on-click="addItem">Add an item</button>
</template>
</dom-module>
<dom-module id="sharing-element">
<template>
<b>Sharing Element</b>
<template is="dom-repeat" items="{{items}}" as="item">
<p>{{item}}</p>
</template>
<button on-click="showItems">Show</button>
</template>
</dom-module>
<template is="dom-bind">
<source-element data="{{data}}" items="{{items}}"></source-element><hr/>
<sharing-element data="{{data}}" items="{{items}}"></sharing-element>
</template>
JavaScript
Polymer({
is: "source-element",
properties: {
data: {
type: Object,
notify: true,
},
items: {
type: Array,
notify: true
}
},
ready: function() {
this.data = this;
this.items = ['a', 'b'];
},
showData: function() {
console.log(this.data.items)
},
addItem: function() {
this.push('items', "three");
this.data = this;
}
});
Polymer({
is: "sharing-element",
properties: {
data: {
type: Object,
notify: true
},
items: {
type: Array,
notify: true,
value: ['1', '2']
}
},
showItems: function() {
console.log(this.items);
}
});