dom-bind-notifier - Object.observed Template binding as in Polymer 0.5

[Tomek W]

Hi all,

As I really loved Polymer 0.5.x Template Binding, that let us use extremely clean HTML templates with just working (out of the box) two-way data binding, I created <dom-bind-notifier> https://github.com/Juicy/dom-bind-notifier - a small custom element, that make it possible in Polymer 1.0.x

I have seen many people asking, or posting issues about this, or problems related to matching Object.observer, or external JS object with Polymer 1.0 templates.

Therefore, I hope you will forgive me such an advertisement. I would be really happy to get some comments or feedback.

The element, naturally, uses `Object.observe` and `Array.observe` so if your browser does not support it, you will need a shim.

It supports nested objects, arrays, all kinds of operations: updates, splices, deletes, etc.

On Polymer end i use public `.notifyPath` method, and not public `_notifySplice` - hopefully this one will get public some day. In my personal opinion, it works better than public `notifyPath` which has a bit tricky API, and requires some knowledge on internals.

I'm not sure if the demo is self-explanatory enough, but the idea is that you can create a template similar to good old `<template bind>`, 

<template is="dom-bind" id="templId">

    <dom-bind-notifier observed-object="{{model}}" ref="templId" path="model" deep></dom-bind-notifier>

    <h4><span>{{model.name}}</span> People:</h4>

    <ul>

        <template  is="dom-repeat" items="{{model.people}}">

            <li><span>{{item.first}}</span></li>

        </template>

    </ul>

</template>

then attach any external JS object, and change the DOM, by changing this object. 

Object can be attached either via custom element within template (iron-ajax, puppet-client, firebase-*), or just from outside.

<script>

    document.getElementById("templId").model = organizationData;

</script>

I hope, you will find it useful :)

Tomek Wytrębowicz