车手水房_车手入门指南

车手水房

如今，大多数Web都由动态应用程序组成，数据在其中不断变化。 结果，持续需要更新在浏览器上呈现的数据。 这就是JavaScript模板引擎急救并变得如此有用的地方。 它们简化了手动更新视图的过程，同时还允许开发人员将业务逻辑与其余代码分开，从而改善了应用程序的结构。 一些最著名JavaScript模板引擎是Mustache ， Underscore ， EJS和Handlebars 。 在本文中，我们将通过讨论其主要功能将注意力集中在车把上 。

车把：它是什么以及为什么要使用它

Handlebars是一种无逻辑的模板引擎，可动态生成HTML页面。 它是Mustache的扩展，具有一些其他功能。 Mustache完全没有逻辑，但是由于使用了一些帮助程序（例如if ， with ， unless each以及更多），Handlebars添加了最少的逻辑，我们将在本文中进一步讨论。 事实上，我们可以说把手是胡子的超集。

把手可以像其他任何JavaScript文件一样加载到浏览器中：

<script src="/path/to/handlebars.min.js"></script>

如果您问为什么要使用此模板引擎而不是其他模板引擎，则应了解其优点。 这是一个简短的清单：

• 它使您HTML页面保持整洁，并将无逻辑的模板与JavaScript文件中的业务逻辑分开，从而改善了应用程序的结构（以及其可维护性和可伸缩性）
• 它简化了手动更新视图上的数据的任务
• 它用于流行的框架和平台，例如Ember.js ， Meteor.js ， Derby.js和Ghost

我希望这段简短的回顾可以帮助您确定是否值得使用把手。

它是如何工作的 ？

如上图所示，Handlebars的工作方式可以总结如下：

1. 把手采用带有变量的模板并将其编译为函数
2. 然后，通过传递JSON对象作为参数来执行此函数。 此JSON对象称为上下文，它包含模板中使用的变量的值
3. 在执行时，该函数在将模板变量替换为其对应的值后返回所需HTML

为了理解上述过程，让我们从一个演示开始，该演示详细说明上述所有步骤。

范本

模板既可以写在HTML文件中，也可以单独写。 在第一种情况下，它们出现在<script>标记内，带有type="text/x-handlebars-template"属性和ID。 变量用双花括号{{}}编写，称为表达式。 这是一个例子：

<script id="handlebars-demo" type="text/x-handlebars-template">
<div>
My name is {{name}}. I am a {{occupation}}.
</div>
</script>

有了这个标记，我们可以看到我们必须使用它。 在您JavaScript文件中，我们首先需要从HTML文档中检索模板。 在以下示例中，我们将为此使用模板的ID。 检索模板后，我们可以使用Handlebars.compile()方法对其进行编译，该方法返回一个函数。 然后通过将上下文作为参数传递来执行此函数。 执行完成后，函数将返回所需HTML，并将所有变量替换为其相应的值。 此时，我们可以将HTML注入到我们的网页中。

将此描述转换为代码将产生以下代码段：

// Retrieve the template data from the HTML (jQuery is used here).
var template = $('#handlebars-demo').html();
// Compile the template data into a function
var templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'
var html = templateScript(context);
// Insert the HTML code into the page
$(document.body).append(html);

此代码的实时演示可在此Codepen演示中找到

语法

现在是时候深入了解车把了。 我们将介绍构成Handlebars核心的一些重要术语和语法。

表达方式

我们已经在上一节中看到了表达式。 模板内部使用的变量由双花括号{{}}包围，称为表达式：

My name is {{name}}

HTML转义

把手可以转义表达式返回的值。 例如，字符<转换为&lt 。 如果不想让Handlebars转义一个值，则必须使用三花括号{{{variableName}}}来包围变量。 例如，当以下模板：

I am learning {{language}}. It is {{{adjective}}}.

与以下报告的context变量一起使用：

var context = {
"language" : "<h3>Handlebars</h3>",
"adjective": "<h3>awesome</h3>"
}

生成HTML将是：

I am learning <h3>Handlebars</h3>. It is <h3>awesome</h3>

可以在此Codepen演示中找到展示此功能的实时演示

注释

我们也可以在Handlebars模板中编写注释。 车把注释的语法为{{!TypeYourCommentHere}} 。 但是，每个带有}}注释或在Handlebars中具有特殊含义的任何其他符号都应以{{!--TypeYourCommentHere--}}的形式编写。 车把注释在HTML中不可见，但是如果要显示它们，则可以使用标准HTML注释： <!--comments--> 。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

如果将所有这些概念都应用到我们正在使用的模板中，我们可以得出以下代码：

<!-- I am learning {{language}} -->
I am learning {{language}}. It is {{!--adjective--}}

如果我们将先前的模板与context变量一起使用，则报告如下：

var context = {
"language" : "Handlebars",
"adjective": "awesome"
}

HTML输出将是：

<!-- I am learning Handlebars -->
I am learning Handlebars. It is

这将导致浏览器不显示标准HTML注释内的内容。 此示例的演示可在此处找到。

积木

在“把手”中，块是具有块开头（ {{# }} ）和结尾（ {{/}} ）的表达式。 稍后我们将在专注于助手的同时深入研究该主题。 现在，看看如何编写if块：

{{#if boolean}}
Some Content here
{{/if}}

路径

车把既支持普通路径又支持嵌套路径，从而可以查找嵌套在当前上下文下方的属性。 车把也支持../路径段。 该段引用父模板作用域，而不是上下文中的上一级。

为了更好地理解该主题，我们将使用下面的示例，其中使用each帮助程序（稍后将详细讨论）。 如您所料，后者会遍历数组的各项。

在此示例中，我们将使用以下模板：

This article is available on {{website.name}}.<br/>
{{#each names}}
I am a {{../occupation}}. My name is {{firstName}} {{lastName}}.<br/>
{{/each}}

通过提供此context变量：

var context = {
"occupation" : "developer",
"website" : {
"name" : "sitepoint"
}
"names" : [
{"firstName" : "Ritesh", "lastName" : "Kumar"},
{"firstName" : "John" , "lastName" : "Doe"}
]
}

我们将获得如下所示的输出：

This article is available on sitepoint.
I am a developer. My name is Ritesh Kumar.
I am a developer. My name is John Doe.

像我们到目前为止创建的其他小片段一样， 此示例在Codepen上可用

帮手

即使Handlebars是一个无逻辑模板引擎，它也可以使用助手执行简单的逻辑。 Handlebars助手是一个简单的标识符，后面可以跟参数（用空格分隔），如下所示：

{{#helperName parameter1 parameter2 ...}}
Content here
{{/helperName}}

每个参数都是一个Handlebars表达式。 可以从模板中的任何上下文访问这些帮助器。

术语“块”，“帮助器”和“块帮助器”有时可以互换使用，因为大多数内置帮助器都是块，尽管有些功能帮助器与块帮助器有所不同。 我们将在讨论自定义帮助程序的同时讨论它们。

一些内置的助手是if ， each ， unless ，并with 。 让我们了解更多。

each助手

each助手用于遍历数组。 帮助程序的语法为{{#each ArrayName}} YourContent {{/each}} 。 我们可以通过在块内使用关键字this来引用单个数组项。 可以使用{{@index}}呈现数组元素的索引。 下面的示例说明了each助手的用法。

如果我们使用以下模板：

{{#each countries}}
{{@index}} : {{this}}<br>
{{/each}}
{{#each names}}
Name : {{firstName}} {{lastName}}<br>
{{/each}}

结合以下context变量：

var context = {
"countries":["Russia","India","USA"],
"names" : [
{"firstName":"Ritesh","lastName":"Kumar"},
{"firstName":"John","lastName":"Doe"}
]
}

那么输出将是：

0 : Russia
1 : India
2 : USA
Name : Ritesh Kumar
Name : John Doe

可在Codepen上找到此示例的实时演示 。

if帮手

if辅助程序类似于if语句。 如果条件评估为真值，则把手将渲染该块。 我们还可以使用{{else}}指定一个称为“ else section”的模板节。 unless helper是if helper的逆。 当条件评估为假值时，它将渲染该块。

为了显示if助手的工作方式，让我们考虑以下模板：

{{#if countries}}
The countries are present.
{{else}}
The countries are not present.
{{/if}}

如果我们提供以下context变量：

var context = {
"countries": []
}

我们将获得以下报告的结果：

The countries are not present.

发生这种情况是因为空数组是虚假值。

如果您想与助手一起玩，可以看一下我在Codepen上创建的现场演示 。

定制助手

您可以使用Handlebars提供的表达系统创建自己的助手来执行复杂的逻辑。 有两种帮助器： 函数帮助器和块帮助器 。 第一个定义用于单个表达式，而后者则用于块表达式。 提供给回调函数的参数是在助手名称之后编写的参数，以空格分隔。 使用Handlebars.registerHelper()方法创建帮助器：

Handlebars.registerHelper("HelperName", function(arguments){
// This function is executed whenever this helper is used
})

自定义功能助手

函数助手的语法为{{helperName parameter1 parameter2 ...}} 。 为了更好地理解如何进行实施，我们创建一个名为studyStatus的函数帮助studyStatus ，该函数返回一个字符串，如果passingYear < 2015 ， passingYear < 2015 “通过”；如果passingYear >= 2015则将“未通过”：

Handlebars.registerHelper("studyStatus", function(passingYear) {
if(passingYear < 2015) {
return "passed";
} else {
return "not passed";
}
})

在我们的示例中，参数只有一个。 但是，如果我们想将更多参数传递给助手的回调函数，则可以在第一个参数之间用空格隔开之后将它们写入模板。

让我们使用此模板开发一个示例：

{{#each students}}
{{name}} has {{studyStatus passingYear}}.<br>
{{/each}}

并带有以下context变量：

var context = {
"students":[
{"name" : "John", "passingYear" : 2013},
{"name" : "Doe" , "passingYear" : 2016}
]
}

在这种情况下，输出将是：

John has passed.
Doe has not passed.

此示例的现场演示可在此处获得。

自定义块助手

自定义块帮助程序的使用方式与函数帮助程序的使用方式相同，但是语法略有不同。 块帮助器的语法为：

{{#helperName parameter1 parameter2 ...}}
Your content here
{{/helperName}}

当我们注册一个自定义块帮助器时，Handlebars会自动将一个options对象作为最后一个参数添加到回调函数中。 该options对象具有fn()方法，该方法允许我们临时更改对象的上下文以访问特定属性。 让我们通过使用一个名为studyStatus但具有相同context变量的块帮助器来更改上一部分的示例：

Handlebars.registerHelper("studyStatus", function(data, options){
var len = data.length;
var returnData="";
for(var i=0;i<len;i++){
// change the value of the passingYear to
// passed/not passed based on the conditions.
data[i].passingYear=(data[i].passingYear < 2015) ? "passed" : "not passed";
// here options.fn(data[i]) temporarily changes the
// scope of the whole studyStatus helper
// block to data[i]. So {{name}}=data[i].name
// in the template.
returnData = returnData + options.fn(data[i]);
}
return returnData;
});
var context = {
"students":[
{"name" : "John", "passingYear" : 2013},
{"name" : "Doe" , "passingYear" : 2016}
]
}

如果此代码与下面定义的模板结合使用

{{#studyStatus students}}
{{name}} has {{passingYear}}
{{/studyStatus}}

我们将获得以下结果：

John has passed.
Doe has not passed.

这是Codepen演示 。

部分模板

车把零件是可以在不同模板之间共享的模板。 它们被写为{{> partialName}} 。 在HTML中使用它们之前，我们需要使用Handlebars.registerPartial()方法注册部分。 以下示例将帮助您理解如何注册部分名为partialTemplate的部分：

Handlebars.registerPartial(
'partialTemplate',
'{{language}} is {{adjective}}. You are reading this article on {{website}}.'
);
var context={
"language" : "Handlebars",
"adjective": "awesome"
}

与以下定义的模板一起使用时

{{> partialTemplate website="sitepoint"}} <br>
{{> partialTemplate website="www.sitepoint.com"}}

它会给出以下结果：

Handlebars is awesome. You are reading this article on sitepoint
Handlebars is awesome. You are reading this article on www.sitepoint.com

此代码的实时演示可在此Codepen演示中找到。

预编译

如我们所见，Handlebars做的第一件事是将模板编译成一个函数。 这是在客户端上执行的最昂贵的操作之一。 如果我们预编译templateScript并将编译后的版本发送给客户端，则可以提高应用程序的性能。 在那种情况下，唯一需要在客户端执行的任务就是执行该功能。 由于预编译的文件是脚本，因此我们可以将HTML脚本作为普通文件加载。 让我们看看如何完成所有这些工作。

首先，您必须使用npm install handlebars -g全局安装Handlebars。 请确保将不同的模板写在具有不同文件名和扩展名.handlebars单独文件中（例如demo.handlebars ）。 无需在这些文件中使用<script>标记。

<div>
My name is {{name}}. I am a {{occupation}}.
</div>

现在，将所有模板文件存储在一个名为templates文件夹中。 您可以使用所需的任何文件夹名称，但是如果这样做，请不要忘记相应地更改以下命令。 因此，打开终端并执行命令：

handlebars path/to/templates -f templatesCompiled.js

该命令将生成一个名为templatesCompiled.js的文件，其中包含所有已编译的模板。 编译器会将模板插入Handlebars.templates 。 如果输入文件是demo.handlebars ，那么它将被插入到Handlebars.templates.demo

现在，我们必须将HTML文件中的templatesCompiled.js作为普通script包含在内。 需要特别注意的是，由于不再需要编译器本身，因此我们不需要加载整个Handlebars库。 我们可以使用较小的“运行时”构建：

<script src="handlebars.runtime.js"></script>
<script src="path/to/templatesCompiled.js"></script>

现在，通过使用以下代码，我们可以使用demo.handlebars中最初存在的模板：

var context = {
"name" : "Ritesh Kumar",
"occupation" : "developer"
}
var templateScript = Handlebars.templates.demo(context);
$(document.body).append(templateScript);

最终输出如下：

My name is Ritesh Kumar. I am a developer.

这种方法将大大提高应用程序的性能，并且由于我们使用的Handlebars运行时版本比整个库更轻巧，因此页面加载时间也减少了。

整个预编译演示的代码可在GitHub上获得 。

结论

在本文中，我们讨论了车把的基本概念。 我们还检查了其常用的功能和语法。 我希望您喜欢本教程，并且将使用随附的演示对该主题有一个很好的了解。 我期待着您的评论。

如果您不想下载该库，但仍想尝试，可以在http://tryhandlebarsjs.com/在线使用Handlebars。

翻译自: https://www.sitepoint.com/a-beginners-guide-to-handlebars/

车手水房