聚合物將功能結果綁定到模板內

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

獎勵：使用記憶也可能有效