Polymer fake data binding

by mgiuffrida

HTML

<script>Polymer = {dom: 'shadow', lazyRegister: true, useNativeCSSProperties: false};</script>
<base href="https://polygit.org/polymer+:master/*+:master/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<dom-module id="x-foo">
  <template>
    <template is="dom-repeat" items="[[items]]">
      <div>[[item.id]]</div>
    </template>
  </template>
</dom-module>


<dom-module id="x-bar">
  <template>
    <template is="dom-repeat" items="[[items]]">
      <div>[[item.id]]</div>
    </template>
  </template>
</dom-module>

<x-foo id="x1"></x-foo>
<x-bar id="x2"></x-bar>

JavaScript

Polymer({is: 'x-foo', properties: { items: { type: Array, notify: true}}});
Polymer({is: 'x-bar', properties: { items: { type: Array, notify: true}}});

var x1 = document.getElementById('x1'); 
var x2 = document.getElementById('x2');


x1.addEventListener('items-changed', function(e) {
  console.log('x1 changed');
  if (e.detail.path) {
    x2.set(e.detail.path, e.detail.value);
  } else {
    x2.set('items', e.detail.value);
  }
});

x2.addEventListener('items-changed', function(e) {
  console.log('x2 changed');
  if (e.detail.path) {
    x1.set(e.detail.path, e.detail.value);
  } else {
    x1.set('items', e.detail.value);
  }
});

x1.items = [{id: '0'}, {id: '1'}, {id: '2'}, {id: '3'}];
x1.set('items.1.id', 'green');

x1.splice('items', 1, 2);