Question

我的Polymer元素有一个1-10个项目的数组属性，所以我需要在元素实例化时生成它。但是，我真的喜欢使用函数调用或引用传递数组：

<script>
  function genArray(size){
    var a = [];
    for(var i = 0, count = size - 1; i < count; i++){
      a.push("domain" + count + ".tld");
    }
    return a;
  }
</script>

<my-element domains="genArray()"></my-element>

或引用全局对象。

<script>
  function genArray(size){
    var a = [];
    for(var i = 0, count = size - 1; i < count; i++){
      a.push("domain" + count + ".tld");
    }
    return a;
  }

  window.myArray = genArray(1000);
</script>

<my-element domains="window.myArray"></my-element>

我尝试过引用样式的变体（"" vs ''）括号（"{{genArray}}"），我甚至'{"array":window.myArray}'。

我知道我可以传递参数或对全局对象的引用，并在生命周期回调中处理它们。但是，如果我可以调用外部函数，那么它将更加清晰并简化测试/部署。我只是搞砸了，直到模板字符串出现在ES7中？

Answer 1

绑定仅适用于Polymer环境，但有一个解决方案！ Polymer提供了一个名为dom-bind的辅助组件，您可以在页面的任何位置使用它，甚至在Polymer元素之外：

<script>
  function genArray() {
      ...
  }

  window.myArray = genArray(1000);
</script>
<template is="dom-bind">
  <my-element domains="[[myArray]]"></my-element>
</template>

可以在https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind

找到有关此组件的更多文档

将函数调用作为Polymer中的属性传递？

1 个答案: