Javascript Google聚合物与子属性的结合

是否可以使用Google Polymer自动绑定子属性？类似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>

TestElem=聚合物({
是：“测试元素”，
特性：{
prop1:{type:String，value:“原始值”，notify:true}
},
factoryImpl:function（）{
var=这个；
setTimeout（函数（）{
that.prop1=“新值”；
}, 2000);
}
});

这是主页面，它创建一个元素并在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>

{{test.prop1}}
var scope=document.getElementById（'main-page'）；
var t=新的TestElem（）；
scope.test=t；

不幸的是，页面没有用新值更新。 有没有办法自动绑定这个

---

下面是一个JSFIDLE:

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

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

---

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

我无法解释原因，但是将示例从setTimeout切换到this.async可以使它工作。

将其绑定为页面范围的子属性不会自动工作，因为您需要在绑定范围上手动调用notifyPath（'test.prop1'，value）。一种方法是将绑定范围传递给TestElem构造函数。请注意，如果自动绑定到父元素，则无需担心此问题。在后一种情况下，更新是自动的

下面介绍了两个绑定和更新方法。一个是自动的，另一个需要对传递给构造函数的绑定范围进行notifyPath调用

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

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

    ready: function() {
      var that = this;
      setTimeout(function () {
        that.prop1 = "new value (via ready)";
      }, 2000);
    },

    factoryImpl: function (app) {
      setTimeout(function () {
        app.notifyPath('test.prop1', 'new value (via app scope)');
      }, 2000);
    }
  });

。。然后通过以下两种方式之一引用元素：

  <test-elem prop1="{{prop1value}}">{{prop1value}}</test-elem>
  <div>{{test.prop1}}</div>
  <script>
    app.test = new TestElem(app);
  </script>

---

我猜是因为性能原因。“由于我们避免使用更复杂的观察机制，如Object.observe或dirty Check，以便在最常见的用例中跨平台获得最佳启动和运行时性能，因此直接更改对象的子属性需要用户的合作。”您能提供JSFIDLE吗？因为它似乎对我不起作用：对不起，您没有正确使用异步函数。test-elem.prop1最初只显示在主页面上，后续的test-elem.prop1更改不会更新主页面。后续更新时，您必须调用notifyPath。

new value (via ready)
new value (via app scope)