Handlebars - 部分模板未获取上下文

Question

我已经将我所有的模板预编译成一个js文件，并在页面中加载了js。

我有3个模板模板 1 - a.handlebars

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

模板 2 - b.handlebars

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

模板 3 -c.handlebars

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

我有以下将数据加载到模板的 JS

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

Handlebars.templates.a(menu);

第一个模板 (a.handlebars) 加载 a1 和 a2。但是当第一个模板加载部分 b.handlebars 时，它失败了。我试着写一个日志语句来查看我为 "this" 得到的是什么。我有 4 个空格，它是字符串类型。

我不明白为什么 b.handlebar 会得到一个字符串，而我认为我会得到（a1 的示例）

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

以前，我没有预编译车把。我的 html 中有所有车把，并使用 Handlebars.compile 编译它，效果很好。我不知道为什么每次编译后代码都会失败。

非常感谢任何帮助。

我正在尝试将他的作为我的最终结果：

<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>

但我明白了。由于 b.handlebars 没有获取对象数据。

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

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

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

非常抱歉post。一段时间以来，我一直在努力寻找解决方案。同样，任何解决此问题的帮助都会很棒。

谢谢。

Answer 1

问题是由于使用 grunt 编译 handlebar/template 文件引起的。

命令："grunt handlebars"

一旦我使用处理程序本身编译了文件，代码就开始工作了。

命令：车把template_files -f output_file

如果有人知道如何使用 grunt 命令使编译后的代码工作，我绝对想知道。谢谢。

Handlebars - 部分模板未获取上下文

Handlebars - partial template not getting the context

handlebars.js