<dom-bind-notifier>

Adds good old Object.observe to Polymer 1.0 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

<template is="dom-bind" id="simple">
  <h4>Welcome to <span>{{model.name}}</span></h4>
  <dom-bind-notifier path="model" observed-object="{{model}}"></dom-bind-notifier>
</template>
<script>
  var simple = { name: "Juicy" };
  document.getElementById("simple").model = simple;
</script>

Deep

<template is="dom-bind" id="deep">
  <h3>{{repo.name}}</h3>
  by <span>{{repo.author.first}}</span> <span>{{repo.author.last}}</span>
  <dom-bind-notifier path="repo" observed-object="{{repo}}" deep></dom-bind-notifier>
</template>
<script>
  var deep = {
  name: "<juicy-dom-notifier>",
  author: {
    first: "Tomek",
    last: "Wytrębowicz"
  }
  };
  document.getElementById("deep").repo = deep;
</script>

Arrays

<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>
  <dom-bind-notifier path="organization" observed-object="{{organization}}" deep></dom-bind-notifier>
</template>


<script>
var arrays = {
  name: "Juicy",
  people: [
    {
      first: "Tomek",
      last: "Wytrębowicz"
    }
  ]
};
document.getElementById("arrays").organization = arrays;
</script>