Question

是否可以使用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>

这是主页面，它会在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>

不幸的是，该页面不会使用新值进行更新。有没有办法自动绑定它？

这是一个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那样自动。

Answer 2

我无法解释原因，但是将您的示例从setTimeout切换到this.async会使其正常工作。

Answer 3

将其绑定为页面范围的子属性不会自动运行，因为您需要在绑定范围上手动调用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>

其中“app”是主页面的全局绑定范围（例如，作为index.html中的顶级元素，如在聚合物入门套件演示应用程序中所做的那样）。

两秒后，两个属性都会更新，并且会显示自动更新的html：

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

使用Google Polymer绑定子属性

3 个答案: