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
<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>
<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>
<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>