polymer - 如何将所需属性传递给元素构造函数

Question

我有一个像这样的 polymer 自定义元素

<script src="http://www.polymer-project.org/platform.js"></script>
<script src="http://www.polymer-project.org/polymer.js"></script>

<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript>
    <template>
      hello from {{options.name}}
    </template>
    <script>
      Polymer({
        get options() {
          return this.controller.options;
        }
      });
    </script>
</polymer>

<div id="container"></div>

<script>
  document.addEventListener('polymer-ready',function() {
    var foo = new MyFoo();
    foo.controller = {
        options : {
            name : "here"
       }
    };
    document.body.appendChild(foo);
  });
</script>

属性“controller”应该是一个具有对象类型属性“options”的对象。

我可以使用

创建自定义元素的实例

var foo = new Foo();

但我无法设置属性“ Controller ”，这会导致错误:

Uncaught TypeError: Cannot read property 'options' of undefined.

当然 - 我可以修改 polymer 组件中的选项 setter/getter 以实现故障安全，如下所示:

...
get options() {
    return this.controller ? this.controller.options : null;
}
...

但在这种情况下，自定义元素也无法识别所应用的数据。

最后一个问题:如何将必需的属性传递给自定义元素构造函数？

Answer 1

一种解决方案是使用计算属性:

<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'>

<polymer-element name="my-foo" constructor="MyFoo" attributes="controller" noscript>
    <template>
      hello from {{options.name}}
    </template>
    <script>
      Polymer({
        computed: {
          options: 'controller.options'
        }
      });
    </script>
</polymer-element>

<script>
  document.addEventListener('polymer-ready',function() {
    var foo = new MyFoo();
    document.body.appendChild(foo);
    foo.controller = {
      options : {
        name : "here"
      }
    }
  });
</script>

您甚至可以使计算属性只是对方法的调用。关键是，通过这样做，Polymer 可以知道何时检查 options 是否已更改，因为它知道计算 options 所需的输入。

Polymer({
  computed: {
    options: 'getOptions(controller)'
  },
  getOptions: function(controller) {
    return controller ? controller.options : null;
  }
});