javascript - 使用 Google Polymer 绑定(bind)子属性

Question

是否可以使用 Google Polymer 自动绑定(bind)子属性？类似于 AngularJS。

这是一个小例子:

这是包含属性 prop1 并在 2 秒后更新它的元素:

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

这是主页面，它创建了一个元素并在 dom 中显示 prop1:

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

不幸的是，页面没有更新为新值。有没有办法自动绑定(bind)它？

这是一个 jsfiddle:http://jsfiddle.net/xkqt00a7/

Answer 1

我发现的最简单的方法是添加事件处理程序:

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

http://jsfiddle.net/83hjzoc3/

但它不像 AngularJS 那样是自动的。