Binding sub-properties with Google Polymer

Question

Is it possible to bind sub-properties automatically with Google Polymer? Something like AngularJS.

Here is a small example:

This is the element that contains the property prop1 and updates it after 2sec:

<dom-module is="test-elem">

    <script>
        TestElem = Polymer({
            is: "test-elem",

            properties: {
                prop1: { type: String, value: "original value", notify: true }
            },

            factoryImpl: function() {
                var that = this;

                setTimeout(function(){
                    that.prop1 = "new value";
                }, 2000);
            }
        });
    </script>

</dom-module>

And this is the main page, which creates an element and show prop1 in the dom:

<template is="dom-bind" id="main-page">

    <span>{{test.prop1}}</span>

</template>

<script>
    var scope = document.getElementById('main-page');

    var t = new TestElem();

    scope.test = t;

</script>

Unfortunately, the page doesn't update with the new value. Is there a way to bind this automatically?

Here is a jsfiddle: http://jsfiddle.net/xkqt00a7/

Answer 1

The easiest way I found was to add an event handler:

t.addEventListener('prop1-changed', function(e){
        scope.notifyPath('test.prop1', e.currentTarget.prop1)
});

http://jsfiddle.net/83hjzoc3/

But it's not automatic like AngularJS.

Answer 2

I can't explain why, but switching your example from setTimeout to this.async makes it work.