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?

My arrays will look something like: `_dataArray = [ { "XValue": 0, "WaferYAxis": 1.353912, "WaferXAxis": -0.779266, "EndEffector": 0.035248 }, { "XValue": 7.370312, "WaferYAxis": 1.198273, "WaferXAxis": -0.601959, "EndEffector": 0.011902 }, { "XValue": 14.578125, "WaferYAxis": 0.987854, "WaferXAxis": -0.476074, "EndEffector": 0.004578 }] and _objectArray=['EndEffector', 'WaferXAxis', 'WaferYAxis' ]`. This object array can be different in each case. and are provided as attributes. — Vishnu, Oct 17 '16 at 09:42
I Couldnt sove that issue in this case. But i have managed to the exact same thing in one of my other projects. The only difference is that, my _objectArray is not an array of strings, its an array of objects. and instead of one way data binding, i used two way (Dont know if it has any relevance in this case). I will post the code below. — Vishnu, Dec 19 '16 at 07:11
vishnu have a look at this problem ,I'm stuck here,it also looks similar http://stackoverflow.com/questions/41184556/property-change-not-reflecting-in-ui-when-its-set-from-dom-repeats-function-p — ksh, Dec 19 '16 at 08:00

score 0 · Answer 1 · answered Oct 15 '16 at 14:40

0

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

answered Oct 15 '16 at 14:40

Tomasz Pluskiewicz

3,622
1
19
42

Oh. That – Vishnu Oct 17 '16 at 05:28
Ok. I'm not sure what the problem is then. Could you add more code to your question? – Tomasz Pluskiewicz Oct 17 '16 at 07:53

Vishnu · Answer 2 · 2016-12-19T07:24:16.547

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.

Call a Method From Inside dom-repeat in Polymer

2 Answers2