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>
What you are trying to do is impossible from the html template. To get this working, you need to use a helper method, eg:
And then in js: