Javascript 在handlebar.js（jQuery移动环境）中使用预编译模板

我有点纠结于如何在车把中预编译模板。我的jQuery移动项目在模板方面变得相当大，我希望预编译我使用的模板

然而，我似乎找不到一个很好的解释（像一个循序渐进的教程）如何做到这一点把手

我仍然使用脚本标记内联所有模板。我用NPM安装了把手。但现在我有点不知所措了

我猜是在做类似的事情

handlebars -s event.handlebars > event.compiled

以某种方式包括event.compiled内容？但是，如何称呼它

我这样调用我的模板

var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html    = template(context);

---

希望有人能给我一些启示。

经过多次尝试和错误（这是学习它的最好方法），以下是适合我的方法

首先，将所有模板外部化，假设脚本标记中有一个模板，如

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</p></div>    
    {{/unless}}
</script>

转到已将events.tmpl保存到的文件夹并运行

handlebars events.tmpl -f events.tmpl.js

在包含handlebar.js之后，将编译后的javascript包含到HTML中

<script src="events.tmpl.js"></script>

---

这里有一个超级快速的预编译车把模板。

另一个很好的选择是使用。一旦安装：

this.compilerInfo = [4, '>=1.0.0']

npm安装grunt contrib把手--保存开发

然后在gruntfile.js中

grunt.initConfig({
    dirs: {
      handlebars: 'app/handlebars'
    },
    watch: {
      handlebars: {
        files: ['<%= handlebars.compile.src %>'],
        tasks: ['handlebars:compile']
      }
    },
    handlebars: {
      compile: {
        src: '<%= dirs.handlebars %>/*.handlebars',
        dest: '<%= dirs.handlebars %>/handlebars-templates.js'
      }
    }
});


grunt.loadNpmTasks('grunt-contrib-handlebars');

grunt.initConfig({
目录：{
车把：“应用程序/车把”
},
观察：{
车把：{
文件：['']，
任务：['handlebar:compile']
}
},
车把：{
汇编：{
src:“/*.把手”，
dest:“/handlebar templates.js”
}
}
});
grunt.loadNpmTasks（“grunt-contrib-handlebar”）；

然后您只需在控制台中键入

grunt watch

，grunt就会自动将所有*.handlebar文件编译到handlebar-templates.js文件中

使用车把真是一种很好的方式

使用Grunt预编译把手模板 假设已安装Node.js。如果你不去，那就去做吧

1） 设置节点依赖项： 在应用程序根目录中添加一个名为

package.json

的文件。将以下内容粘贴到该文件中：

{
  "devDependencies": {
   "grunt-contrib-handlebars": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "handlebars": "~1.3.0"
  },
}

module.exports = function(grunt) {

    var TEMPLATES_LOCATION        = "./src/templates/",       // don't forget the trailing /
        TEMPLATES_EXTENSION       = ".hbs",
        TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION,       // don't forget the trailing /
        TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js";  // don't forget the .js

    grunt.initConfig({
        watch: {
            handlebars: {
                files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
                tasks: ['handlebars:compile']
            }
        },
        handlebars: {
            compile: {
                src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
                dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
                options: {
                    amd: true,
                    namespace: "templates"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-contrib-watch');

}

这个JSON文件告诉Node需要安装哪些包。这有助于其他开发人员快速启动和运行，您将在下一步中看到这一点

2） 安装节点依赖项： 在终端/命令提示符/powershell中，

cd

插入项目根目录，并运行以下命令：

npm install grunt -g
npm install grunt-cli -g

要安装package.json中列出的依赖项，请执行以下操作：

npm install

现在，您已经安装了所需的所有节点依赖项。在项目根目录中，您将看到一个

节点\u模块文件夹

3） 配置Grunt： 在项目根目录中，创建一个名为

grunfile.js

的文件。将以下内容粘贴到该文件中：

{
  "devDependencies": {
   "grunt-contrib-handlebars": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "handlebars": "~1.3.0"
  },
}

module.exports = function(grunt) {

    var TEMPLATES_LOCATION        = "./src/templates/",       // don't forget the trailing /
        TEMPLATES_EXTENSION       = ".hbs",
        TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION,       // don't forget the trailing /
        TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js";  // don't forget the .js

    grunt.initConfig({
        watch: {
            handlebars: {
                files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
                tasks: ['handlebars:compile']
            }
        },
        handlebars: {
            compile: {
                src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
                dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
                options: {
                    amd: true,
                    namespace: "templates"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-contrib-watch');

}

4） 根据您的喜好进行配置： 如果不使用Require.js，则需要将

handlebar.compile.options.amd

更改为

false

。您还可以根据自己的喜好调整

名称空间

选项。如果您使用的是require/amd模块，那么namespace属性并不重要（如果您删除它，它的默认值是“JST”）

因为所有的项目结构都有一点不同，所以只需要稍微配置GrunFile。修改常量

TEMPLATES\u LOCATION

，

TEMPLATES\u EXTENSION

，

TEMPLATES\u OUTPUT\u LOCATION

，

TEMPLATES\u OUTPUT\u FILENAME

，以适合您的项目

如果模板分散在整个应用程序中，则需要将

templates\u位置

更改为尽可能低的目录。确保模板与节点模块、bower\u组件或任何其他第三方目录隔离，因为您不希望Grunt将第三方模板编译到应用程序编译的模板中。如果您将自己的所有代码都包含在

/src

、

/js

、

/app

目录中，您就可以了

5） 使用Grunt编译模板： 要在后台运行grunt，请打开终端并将

cd

放入项目根目录，然后运行命令：

grunt watch:handlebar

（只需

grunt watch

）。在后台运行grunt时，将自动编译对模板文件的所有更改，并根据需要重写指定的输出文件

handlebar.compile.dest

。输出将如下所示：

Running "watch" task
Waiting...

要单独运行编译任务，请打开终端并将

cd

放入项目根目录，然后运行命令：

grunt handlebar:compile

（只需

grunt:handlebar

）。输出将类似于：

Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.

Done, without errors.

运行“把手：编译”任务
文件“/src/templates/compiled_templates.js”已创建。
完成，没有错误。

以下是我的做法：

准备工作 我们将假定所有模板变量都位于名为

context

的变量中：

var context = {
    name: "Test Person",
    ...
};

在哪里放置模板 创建一个包含所有模板的目录（我们称之为

templates/

） 在此处添加模板，名为

filename.handlebar

您的目录结构：

.
└── templates
    ├── another_template.handlebars
    └── my_template.handelbars

.
├── compiled.js
└── templates
    ├── another_template.handlebars
    └── my_template.handlebars

编译模板 首先转到根目录，然后使用npm CLI程序编译模板：

handlebar模板/*.handlebar-f compiled.js

新目录结构：

.
└── templates
    ├── another_template.handlebars
    └── my_template.handelbars

.
├── compiled.js
└── templates
    ├── another_template.handlebars
    └── my_template.handlebars

用法 在包含运行时后，在HTML页面中包含

compiled.js

：

<script src="handlebars.runtime.js"></script>
<script src="compiled.js"></script>

评论 请注意文件扩展名

.handlebar

。在编译模板时，它会自动剥离

this.compilerInfo = [4, '>=1.0.0']

额外：若您同时使用Jetbrains IDE之一，您甚至可以获得相当好的编辑器支持。

对于Handlebar 2.0.0 alpha更新： @宏已经非常清楚地解释了它是如何使用一个模板的，请

npm install handlebars@1.3.0 -g

this.compilerInfo = [4, '>=1.0.0']

handlebars *.handlebars -f templates.js

<script src="/lib/handlebars.runtime.js"></script>
<script src="templates.js"></script>