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

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指示器等。

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

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

表数据包含object数组，该数组包含headers数组中指定的键。希望这篇文章能对某些人有用。