Change Notification With array of objects

With siblings

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.v}}</p>
        </template>
        <button on-click="addItem">Add an item</button>
        <button on-click="tweakItem">Tweak 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.v}}</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,
            observer: 'itemsObserver',
        }
    },
    ready: function() {
      this.data = this;
      this.items = [{v: 1},{v: 2}];
    },
    showData: function() {
        console.log(this.data.items)
    },
    
    addItem: function() {
    	this.push('items', {'v': 3});
        this.data = this;
    },
    tweakItem: function() {
        this.items[0].v = "tweaked";
        this.notifyPath('data', "tweaked");
    },
    itemsObserver: function() {
		console.log("called");
    }
});

Polymer({
    is: "sharing-element",
    properties: {
        data: {
            type: Object,
            notify: true
        },
        items: {
        	type: Array,
        	notify: true,
            value: [{v: 'a'},{v: 'b'}]
        }
    },
    showItems: function() {
       console.log(this.items);
    }
});