聚合物在模板内绑定函数结果

Question

我试图避免在 dom-repeat 中多次调用同一个函数。

示例：

<template is="dom-repeat" items="..." as="column">
  <template result="_myFunction(column, index)">
    <div>Primary: [[result.primary]]</div>
    <div>Secondary: [[result.secondary]]</div>
    ...
  </template>
</template>


...
_myFunction(column, index) {
  return { primary: "1", secondary: "2", ......}
}

但是我找不到正确的方法，目前我在所有 <div> 中调用 _myFunction(column, index)。

如何避免多次调用函数？

Answer 1

尝试使用以下代码，其聚合物自定义元素的工作示例 DOM 重复，希望这对您有用，

<dom-module id="your-template-container">
    <template>
        <template is="dom-repeat" items="{{data}}" as="column">
            <div>Primary: [[column.primary]]</div>
            <div>Secondary: [[column.secondary]]</div>
        </template>
    </template>

    <script>
        Polymer({
            is: 'your-template-container',
            ready: function() {
                // Sample object data is below
                this.data = [
                    {primary: 1, secondary: 2},
                    {primary: 1, secondary: 2},
                    {primary: 1, secondary: 2}
                ];
            }
        });
    </script>

</dom-module>

<!-- THE FOLLOWING WILL RENDER YOU POLYMER CUSTOM ELEMENT WITH DOM REPEAT-->
<your-template-container></your-template-container>

Answer 2

我找到了一种避免使用缓存多次调用 _myFunction 的方法：

Before the `dom-repeat`: 
  execute the function 
  cache the result in an object

In the `dom-repeat`
  use the cached-object to retrieve the value

奖励：使用记忆也可能有效

聚合物在模板内绑定函数结果

polymer binding a function result inside template

javascript

polymer-2.x