Question

我有像这样的聚合物自定义元素

<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”应该是具有object类型属性“options”的对象。

我可以使用

创建自定义元素的实例

var foo = new Foo();

但是我无法设置导致错误的属性“controller”：

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

当然 - 我可以将聚合物组件中的选项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;
  }
});

如何将必需的属性传递给元素构造函数

1 个答案: