# 安装
¥Installation
安装 Handlebars 的方法有很多种,具体取决于你使用的编程语言和环境。
¥There are a variety of ways to install Handlebars, depending on the programming language and environment you are using.
# npm 或 yarn(推荐)
¥npm or yarn (recommended)
Handlebars 的参考实现是用 JavaScript 编写的。最常见的是使用 npm
或 yarn
安装:
¥The reference implementation of Handlebars is written in JavaScript. It is most commonly installed using npm
or
yarn
:
npm install handlebars
or
yarn add handlebars
然后你可以通过导入来使用 Handlebars:
¥You can then use Handlebars by importing it:
import Handlebars from "handlebars";
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));
如果你在 CommonJS 环境中使用 Handlebars,则可以使用 require
:
¥If you are using Handlebars in a CommonJS environment, you can use require
:
const Handlebars = require("handlebars");
const template = Handlebars.compile("Name: {{name}}");
console.log(template({ name: "Nils" }));
提示
使用 npm 或 yarn 是使用 Handlebars 的推荐方式。如果你想在网络浏览器中使用 Handlebars 模板,我们建议你使用构建引擎,例如 Webpack、Browserify 或 Parcel。
¥Using npm or yarn is the recommended way of using Handlebars. If you want to use Handlebars templates in the web-browser, we recommend that you use a build-engine such as Webpack, Browserify or Parcel.
integrations 页面包含这些加载器的插件列表,允许你自动预编译模板或以其他方式使用 Handlebars。
¥The integrations page contains a list of plugins for those loaders that allow you to automatically precompile templates or use Handlebars otherwise.
¥!buttonLearn more: Integrations
# 浏览器构建在 npm-package 中
¥Browser builds in the npm-package
浏览器版本位于 node_modules/handlebars/dist/
目录中。使浏览器可以访问这些文件取决于你使用的构建系统,但这可能就像将文件复制到可访问的位置一样简单。
¥The browser builds are located in the node_modules/handlebars/dist/
directory. Making these accessible to the browser
will depend on what build system you are using but this may be as simple as copying the files to an accessible place.
这是使用预编译器时的首选安装方法,因为它可以确保预编译模板始终针对相同版本的运行时运行。
¥This is the preferred method of installation when using the precompiler as it ensures that your precompiled templates always run against the same version of the runtime.
# 下载 Handlebars
¥Downloading Handlebars
提供以下下载是为了方便社区。它们并不适合生产使用,但它们可以让你快速启动,而无需设置构建引擎。
¥The following downloads are provided as a convenience to the community. They are not meant for production use, but they can give you a quick-start without having to set up a build-engine.
# 最新版本(版本 4.7.8)
¥Latest release (version 4.7.8)
# 非发布版本
¥Non-release builds
Handlebars 的所有发布版本和 CI 版本都可以在我们的 构建页面 (opens new window) 中的 S3 上下载。
¥All of Handlebars' released versions and CI builds are available for download on S3 in our builds page (opens new window).
最新传递的 master 版本名为 handlebars-latest.js
,master 上的每个传递 SHA 将创建一个 handlebars-gitSHA.js
文件。虽然这些都通过了 CI,但最好使用标记的版本之一。
¥The latest passing master build is named handlebars-latest.js
and each passing SHA on master will create a
handlebars-gitSHA.js
file. While these all pass the CI, it's preferable to use one of the tagged releases.
注意:提供构建页面是为了方便社区,但你不应该将其用于在生产中托管 Handlebars。
¥Note: The builds page is provided as a convenience for the community, but you should not use it for hosting Handlebars in production.
# CDN
Handlebars 也托管在许多免费 CDN 上。
¥Handlebars is hosted on a number of free CDNs as well.
jsDelivr (opens new window)。可以使用高级用法,例如 版本别名和调制 (opens new window)。
¥jsDelivr (opens new window). Advanced usage, such as version aliasing & concocting (opens new window), is available.
# RubyGems
官方 Handlebars 版本已在 https://rubygems.org/gems/handlebars-source (opens new window) 上提供。
¥The official Handlebars build is available on https://rubygems.org/gems/handlebars-source (opens new window).
# Bower, Component, Composer, jspm
Handlebars 也可以通过使用其他包管理器来启用,例如
¥Handlebars can be enabled by using other package-managers as well, like
Bower(已弃用)
¥Bower (deprecated)
组件
¥Component
作曲家
¥Composer
jspm
详情请参见 https://github.com/components/handlebars.js (opens new window)。
¥See https://github.com/components/handlebars.js (opens new window) for details.
# 用法
¥Usage
你可以通过将模板包含在 <script>
标记中来将模板传送到浏览器。
¥You can deliver a template to the browser by including it in a <script>
tag.
<script id="entry-template" type="text/x-handlebars-template"></script>
始终为模板使用脚本标签
如果使用此方法,则必须使用脚本标签封装模板。否则,如果你不这样做,浏览器可能会删除或修改模板的部分内容。看一下 "表中出现意外标记" (opens new window) 的例子。
¥If you use this method, you have to wrap your template with a script-tag. Otherwise the browser may remove or modify parts of your template if you don't. Have a look at "Unexpected markup in tables" (opens new window) for an example.
使用 Handlebars.compile 在 JavaScript 中编译模板
¥Compile a template in JavaScript by using Handlebars.compile
var source = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);
通过使用上下文执行模板来获取评估 Handlebars 模板的 HTML 结果。
¥Get the HTML result of evaluating a Handlebars template by executing the template with a context.
var context = { title: "My New Post", body: "This is my first post!" };
var html = template(context);
结果是
¥results in
<div class="entry">
<h1>My New Post</h1>
<div class="body">
This is my first post!
</div>
</div>
# 预编译模板
¥Precompiling Templates
在前面的示例中,我们加载了 Handlebars 的编译器和运行时版本。预先编译模板并将预编译版本包含在你的网站中会更有效。你可以包含较小的运行时,并且浏览器不必在运行模板之前对其进行编译。
¥In the previous example, we have loaded the compiler-and-runtime version of Handlebars. It is much more efficient, to compile your templates beforehand and include the precompiled version in your website. You can include the smaller runtime and the browser does not have to compile the templates before running them.
¥!buttonLearn More: Precompilation
# Bower(已弃用)
¥Bower (deprecated)
警告
¥Bower is deprecated (opens new window)
Bower 版本的 Handlebars 仍在发布(目前)以实现向后兼容性。但如果你正在建立一个新项目,则不应再使用它。
¥Bower versions of Handlebars are still published (at the moment) for backwards compatibility. But if you are setting up a new project, you should not use it anymore.
# 其他编程语言
¥Other programming languages
许多编程语言都有 Handlebars 实现。
¥There are Handlebars implementations for many programming languages.
预编译模板 →