How to include dynamic properties in path name inside dom-repeat?

82 views Asked by At

I am trying to bind the state of a checkbox to a specific nested subproperty of hostProperty. The checkboxes are generated inside a nested "dom-repeat" template (iterating through innerObj per outerObj), and the desired subproperty of hostProperty is relative to subproperties of the other objects, i.e. it is of the form hostProperty[outerObj.name][innerObj.name].

I have been unable to figure out the correct path name for the subproperty.

I have tried the following and all have failed:
- hostProperty.outerObj.name.innerObj.name (likely looks for hostProperty.outerObj.name which is undefined)
- ['hostProperty', outerObj.name, innerObj.name] (based on the documentation for specifying paths)
- hostProperty[outerObj.name][innerObj.name]
- hostProperty.outerObj['name'].innerObj['name']

<template is="dom-repeat" items="[[outerObj_arr]]" as="outerObj">
    <tr>
        <th scope="row">[[outerObj.name]]</th>                    
        <template is="dom-repeat" items="[[innerObj_arr]]" as="innerObj">
            <!-- broken path name below -->
            <td><paper-checkbox checked="[[hostProperty.outerObj.name.innerObj.name]]"></paper-checkbox></td>
        </template>
    </tr>
</template>
1

There are 1 answers

1
Thomas Oomens On

What you are trying to do is impossible from the html template. To get this working, you need to use a helper method, eg:

<td><paper-checkbox checked="[[_getChecked(hostProperty, outerObj.name, innerObj.name)]]"></paper-checkbox></td>

And then in js:

_getChecked(list, key1, key2) {
  return list[key1][key2];
}