<dom-bind-notifier>

Adds good old Object.observe to Polymer 1.5 template binding (dom-bind)

Here we bind external static JS object literal to Polymer's dom-bind. All changes on it, are automatically notified to Polymer templates. Open debug console, and fiddle with simple, deep, arrays objects

Examples

Simple


	
<dom-module id="simple-component">
  <template>
    <h4>ToDo list for {{model.user}}:</h4>
    <button on-tap="ChangeName" >Change Name</button>
	<dom-bind-notifier path="model" observed-object="{{model}}"></dom-bind-notifier>
  </template>
</dom-module>
<script>
Polymer({
  is: 'simple-component',
  ready: function() {
	this.model = {user: 'Artur'};
  },
  ChangeName: function() {
	this.model.user = this.model.user + "_1";
  }
});
</script>

Arrays


<dom-module id="array-component">
	<template is="dom-bind" id="arrays">
	  <h4><span>{{organization.name}}</span> people:</h4>
	  <ul>
		<template  is="dom-repeat" items="{{organization.people}}">
		  <li><span>{{item.first}}</span> <span>{{item.last}}</span></li>
		</template>
	  </ul>
	  
	  <button on-tap="ChangeName">Click to change <code>arrays.people[1].first</code>to an apple</button>
	  <dom-bind-notifier path="organization" observed-object="{{organization}}" deep></dom-bind-notifier>
	</template>
</dom-module>

<script>
Polymer({
  is: 'array-component',
  ready: function() {
	this.organization = {
	  name: "Juicy",
	  people: [
		{
		  first: "Tomek",
		  last: "Wytrębowicz"
		}
	  ]
	};
  },
  ChangeName: function() {
	this.organization.people[1].first= 'An Apple';
  }
});
</script>