Search code examples
javascriptjsrenderjsviews

How to access parent data in JsViews data-linked method


Is it possible to access parent data from within a data-linked function in JsViews?

{^{for sections}}
...
{^{for itemTypes}}
    <tbody>
       <tr>
        <td>{^{:label}}</td>
        <td>{^{if addable==true}}<button class="btn btn-sm btn-primary" data-link="{on ~addItem}">Add an item</button>{{/if}} </td>
      </tr>
     </tbody>
{{/for}}
...
{{/for}}

Is it possible to access the section data (the parent) from the addItem function?

 addItem: function(ev, eventArgs) {
   var view = eventArgs.view;
   var index = view.getIndex();
   var parent = ????
   ...
 }

Thanks


Solution

  • The docs provide relevant information in a few places, such as:

    For programmatic access within the addItem method, you can use view APIs to step up through the view hierarchy, then get the data:

    var section = view.parent.parent.data;
    

    or

    var section = view.parent.get("item").data;
    

    Alternatively you can pass the section data down declaratively as a contextual parameter:

    {^{for itemTypes ~section=#data}}
    ...
    <button ... data-link="{on ~addItem ~section}">
    

    then use it directly:

    addItem: function(section, ev, eventArgs) {
      ...
    }