Call a Method From Inside dom-repeat in Polymer

Question

I'm having this situation where I need to call a method from the dom-repeat. Below is my code

<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>

and in my _getColumnItemValue method, I want to get the value for an object with key specified by the columnData attribute.

Like rowData[columnData]

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

My problem is the method _getColumnItemValue is not being called. Is there any better way to do achieve this?

Answer 1

If your code is exactly as you pasted, then you have one too many <template> tags.

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

The innermost template must be removed. You are rendering that instead of the <span>.

Answer 2

Finally i was able to make this thing working. Not exactly in this case, but in another project, with exact same logic. The only change was my _objectArray was not an array of strings, it was an array of objects. So the code will look like this:

<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>

See the method getRowData

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

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

This is for a table, which can dynamically add or remove rows and columns and show different type of elements like, a text, link, checkbox some of my custom controls like led-indicator etc.

The logic behind is, the headers array will be used to generate the table columns, this array contains objects of structure

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

and table data contains array of object, which contains the key specified in the headers array. Hope this may be useful for some one.