javascript - Handlebars 辅助功能不起作用

Question

我在我的应用程序中使用handlebars，所有模板及其相应的helper函数都写入.html文件本身。模板编译发生在我的 Backbone View 中，这意味着它发生在 .js 文件中。

在实现 require.js 之前，我所有的 View 实例都是全局的，这就是为什么模板编译工作正常，但现在我使用 require.js 将我的 View 代码重构为模块> 因此，当模板编译时异常(Missing helper: 'setIndex')出现时，我的模板无法工作。我是这样写的

index.html:

 //loading library 
 <script type="text/javascript" src="lib/js/handlebars-v1.1.2.js"></script>
 //helper function
 <script>
   Handlebars.registerHelper('setIndex', function(value){this.index = Number(value);});
 </script>
 //template
 <script id="ftpBodyInitialTpl" type="text/x-handlebars-template">
    {{#each bizSteps}}
        {{setIndex @index}}
    {{/each}}
 </script>

.js 文件:

define(["handlebars"],function(Handlebars){
    //templates compilation happening here.
});

我不知道，为什么它显示缺少助手:'setIndex'任何人都可以帮助我。

谢谢。

Answer 1

看起来您正在加载 Handlebars 而没有 RequireJS:

<script type="text/javascript" src="lib/js/handlebars-v1.1.2.js"></script>

然后使用 RequireJS:

define(["handlebars"],function(Handlebars){

您没有提到模块加载错误消息，因此我假设您正确配置了 RequireJS 来加载它，并且 RequireJS 确实加载了它。问题是你最终会得到两个 Handlebars 实例。没有 RequireJS 加载的实例会获得 setIndex 帮助器。加载了 RequireJS 的则不然。此问题有多种解决方案:

1. 在没有 RequireJS 的情况下加载 Handlebars，并避免也使用 RequireJS 加载它。在这种情况下，您只需使用 Handlebars 导出的全局 Handlebars 符号即可。您没有在您的模块所需的模块中列出 Handlebars 。

2. 使用 RequireJS 加载 Handlebars，并避免在不使用 RequireJS 的情况下加载 Handlebars。您必须删除加载 Handlebars 的 script 标记，并且帮助程序必须成为 AMD 模块。

3. 在没有 RequireJS 的情况下加载 Handlebars 以及在 RequireJS 中假加载 Handlebars。您可以保持代码不变。您可以像这样配置 RequireJS:

   路径:{ Handlebars :“path/to/handlebars-fake.js”}

handlebars-fake.js 文件将是:

define(function () {
    return Handlebars;
});

因此，RequireJS 最终会得到与加载 script 相同的 Handlebars 实例。