CODEWITHSUNDEEP
handlebars.js
Ananth
Ananth

Reputation: 110

Handlebars - partial template not getting the context

I have pre compiled all my templates into one js file and loaded the js in the page.

I have 3 templates Template 1 - a.handlebars

<ul>
		{{#each this}}
			<li class="a">
				<a href="#">{{@key}}</a>
				{{> b}}
			</li>
		{{/each}}
	</ul>

Template 2 - b.handlebars

 <ul>
   {{#each this}}
   <li class="b">
     <a href="#">{{@key}}</a>
     {{> c}}
   </li>
   {{/each}}
</ul>

Template 3 -c.handlebars

 <ul>
   {{#each this}}
   <li class="c">
     <a href="#">{{ this }}</a>
   </li>
   {{/each}}
</ul>

I have the following JS which load data to the template

var menu= {
   a1:{
     b1:[c1, c2, c3],
     b2: [c4, c5, c6]
   },
   a2:{
     b3:[c7, c8],
     b4: [c9]
   }
 };

Handlebars.templates.a(menu);

The first template (a.handlebars) loads a1 and a2. But when the first template loads the partials b.handlebars it fails. I tried to put a log statement to see what is that I am getting for "this". I got 4 spaces and it was of type string.

I do not understand why b.handlebar is getting a string when I thought I will be getting (example for a1)

{
    b1:[c1, c2, c3],
    b2: [c4, c5, c6]
}

Previously,I did not pre compile the handlebars. I had all the handlebars in my html and compiled it using Handlebars.compile it worked fine. I do not know why the code is failing after per compiling.

Any help is highly appreciated.

I am trying to get his as my final result:

<ul>
   <li class="a"><a href="#">a1</a>
       <ul>
           <li class="b"><a href="#">b1</a>
             <ul>
               <li class="c"><a href="#">c1</a></li>
               <li class="c"><a href="#">c2</a></li>
               <li class="c"><a href="#">c3</a></li>
             </ul>
           </li>
           <li class="b"><a href="#">b2</a>
              <ul>
               <li class="c"><a href="#">c4</a></li>
               <li class="c"><a href="#">c5</a></li>
               <li class="c"><a href="#">c6</a></li>
             </ul>
           </li>
           <li class="b"><a href="#">b3</a></li>
       </ul>
  </li>
  <li class="a"><a href="#">a2</a>
       <ul>
           <li class="b"><a href="#">b3</a>
             <ul>
               <li class="c"><a href="#">c7</a></li>
               <li class="c"><a href="#">c8</a></li>
             </ul>
           </li>
           <li class="b"><a href="#">b4</a>
              <ul>
                <li class="c"><a href="#">c9</a></li>
             </ul>
           </li>
       </ul>
   </li>
 </ul>

But I am getting this. Since the b.handlebars is not getting the object data.

<ul>
  <li class="a"><a href="#">a1</a>
    <ul>

    </ul>
  </li>
  <li class="a"><a href="#">a2</a>
    <ul>

    </ul>
  </li>
</ul>

My apologies for the very lengthy post. I have been trying to find a solution for this for a while now. Again, any help to resolve this issue would be great.

Thanks.

Upvotes: 1

Views: 214

Answers (1)

Ananth
Ananth

Reputation: 110

The issue was caused due to compiling the handlebar/template files using grunt.

Command: "grunt handlebars"

Once I compiled the files using handlers itself, the code started working.

Command: handlebars template_files -f output_file

If anyone knows how to make the compiled code work using grunt command I would definitely would like to know. Thanks.

Upvotes: 1

Related Questions