Passing data from a parent to a child template

Question

I'm starting to teach myself development using Suitecommerce Advanced and there is something I'm stuck on.

I'm calling this in the parent view's template and I want to pass on a class name to the child:

 <div data-view="Header.Menu" data-options="{className : 'nav-header'}"></div>

And then on the child view's template I want to use that classname

<ul class="{{className}}">
    {{#each links}}
        <li class="nav__item"><a class="hvr-underline" href="{{link}}">{{name}}</a></li>
    {{/each}} 
 </ul>

Unfortunately, this is not the right way to do this, but I'm not sure what the right way is.

score 3 · Accepted Answer · answered Aug 09 '17 at 18:47

When you call the child view from your parent view's .js file, add in the options like this:

childViews: {
        'Header.Menu': function ()
        {
            return new HeaderMenuView({
                option1: 'option1 value',
                option2: 'option2 value',
            });
        }

Then you can access it from the child view's initialize function in the its' view.js file like this:

initialize: function(options) 
{
    console.log(options.option1);
    console.log(options.option2);
}

Hope this helps!

Passing data from a parent to a child template

1 Answers1