Question

我遇到这种情况需要从dom-repeat调用一个方法。以下是我的代码

<template is='dom-repeat' items="[[_dataArray]]" as="rowItem">
     <template is='dom-repeat' items="[[_objectArray]]" as="columnItem">
         <template>
             <span>[[_getColumnItemValue(rowItem, columnItem)]]</span>
         </template>
     </template>
</template>

在我的_getColumnItemValue方法中，我希望获取具有columnData属性指定的键的对象的值。

赞rowData[columnData]

_getColumnItemValue: function(rowData, columnData) {
    return rowData[columnData];
}

我的问题是没有调用方法_getColumnItemValue。有没有更好的方法来实现这个目标？

Answer 1

如果您的代码与您粘贴的完全一致，那么您的<template>代码就会太多。

<template is='dom-repeat'>
  <template is='dom-repeat'>
     <span></span>
  </template>
</template>

必须删除最里面的模板。您正在渲染而不是<span>。

Answer 2

最后我能够让这件事发挥作用。不完全是在这种情况下，但在另一个项目中，具有完全相同的逻辑。唯一的变化是我的_objectArray不是一个字符串数组，它是一个对象数组。所以代码看起来像这样：

<template is="dom-repeat" items="{{tableData}}" as="rowData"> <tr> <template is="dom-repeat" items="{{headers}}" as="columnData"> <td> <template is="dom-if" if="{{checkType(columnData, 'check')}}"> <paper-checkbox disabled="{{getAttributeValue(columnData, 'disabled')}}" checked="{{getRowData(rowData, columnData)}}" on-change="checkBoxSelected"></paper-checkbox> </template> <template is="dom-if" if="{{checkType(columnData, 'led')}}"> <led-indicator on="{{!getRowData(rowData, columnData)}}"></led-indicator> <span style="display: none;">{{getRowData(rowData, columnData)}}</span> </template> <template is="dom-if" if="{{checkType(columnData, 'link')}}"> <a href="javascript:void(0)" on-click="tableRowClicked">{{getRowData(rowData, columnData)}}</a> </template> <template is="dom-if" if="{{checkType(columnData, 'text')}}"> <span>{{getRowData(rowData, columnData)}}</span> </template> </td> </template> </tr> </template>

参见方法getRowData

getRowData: function (row, column) { return row[column.key]; }, 和

checkType: function (columnData, type) { var isType = false; isType = columnData.type.toLowerCase() == type.toLowerCase(); return isType; },

这是一个表，它可以动态添加或删除行和列，并显示不同类型的元素，如文本，链接，复选框等一些自定义控件，如led-indicator等。

背后的逻辑是，headers数组将用于生成表列，此数组包含结构对象

{ name: 'Popular Name', key: 'PopularName', type: 'text' }

和表数据包含object数组，其中包含headers数组中指定的键。希望这可能对某些人有用。

从聚合物中的dom-repeat内部调用方法

2 个答案: