车把 Template 脚本标签 - HTML

车把 (Handlebars) 是一款 JavaScript 模板引擎，允许程序员使用 HTML 模板来构建动态网页。车把允许程序员将 HTML 和 JavaScript 组合在一起，生成动态的网页内容。

在车把模板中， HTML 代码通常被定义为模板标签，而这些标签中的内容往往是动态的。车把的标签体系非常易学易用，此文将着重介绍车把模板中的脚本标签。

基本用法

要使用车把模板，需在 HTML 页面中添加车把的脚本标签。建议将模板标签和相应的数据绑定在同一 JavaScript 文件中。

下面是车把模板的最小示例:

<script id="template" type="text/x-handlebars-template">
    <div>
        <h1>Hello, {{name}}!</h1>
    </div>
</script>

<script>
    const source = document.getElementById("template").innerHTML;
    const template = Handlebars.compile(source);
    const context = { name: "World" };
    const html = template(context);
    document.getElementById("output").innerHTML = html;
</script>

<div id="output"></div>

此示例中，我们定义了一个简单的模板，该模板定义了一个 div 元素，其中包含一个 h1 标题元素，标题中包含了一个变量 name。

接下来，我们编译模板，并将编译之后的模板与一个 JavaScript 对象 context 绑定。在此示例中，我们设置 context 对象中的 name 属性为 "World"。

最后，我们将编译后的模板应用于我们的 context 对象，并将输出结果添加到 HTML 页面中的 div 标签中。

此示例将输出 Hello, World!。

脚本标签

在车把模板中，脚本标签允许程序员根据逻辑控制生成的 HTML 内容。

{{#if condition}}...{{/if}}

车把的 if 标签允许程序员根据一个条件判断语句来控制生成的 HTML 内容。

下面是一个示例:

<script id="template" type="text/x-handlebars-template">
    <div>
        {{#if isMorning}}
            <h1>Good morning, {{name}}!</h1>
        {{ else }}
            <h1>Hello, {{name}}!</h1>
        {{/if}}
    </div>
</script>

<script>
    const source = document.getElementById("template").innerHTML;
    const template = Handlebars.compile(source);
    const context = {
        name: "World",
        isMorning: true
    };
    const html = template(context);
    document.getElementById("output").innerHTML = html;
</script>

<div id="output"></div>

在此示例中，我们使用了车把的 if 标签，根据 isMorning 属性的值，决定生成的 HTML 内容。

当 isMorning 属性的值为 true 时，我们将生成一个标题为 Good morning, World! 的 h1 元素。

否则，我们将生成一个标题为 Hello, World! 的 h1 元素。

{{#each list}}...{{/each}}

车把的 each 标签允许程序员迭代生成 HTML 内容。

下面是一个示例:

<script id="template" type="text/x-handlebars-template">
    <ul>
        {{#each fruits}}
            <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

<script>
    const source = document.getElementById("template").innerHTML;
    const template = Handlebars.compile(source);
    const context = {
        fruits: ["Apple", "Banana", "Pear"]
    };
    const html = template(context);
    document.getElementById("output").innerHTML = html;
</script>

<div id="output"></div>

在此示例中，我们使用了车把的 each 标签，迭代 fruits 数组中的元素，并生成一个包含所有水果名称的列表。

每次迭代时，我们使用 this 关键字引用当前数组元素的值。

{{#with context}}...{{/with}}

车把的 with 标签允许程序员在模板中创建一个新的作用域。

下面是一个示例:

<script id="template" type="text/x-handlebars-template">
    {{#with person}}
        <div>
            <h1>{{name}}</h1>
            <p>{{gender}}, {{age}} years old</p>
        </div>
    {{/with}}
</script>

<script>
    const source = document.getElementById("template").innerHTML;
    const template = Handlebars.compile(source);
    const context = {
        person: {
            name: "Alice",
            gender: "Female",
            age: 25
        }
    };
    const html = template(context);
    document.getElementById("output").innerHTML = html;
</script>

<div id="output"></div>

在此示例中，我们使用了车把的 with 标签，创建了一个新的作用域，允许我们更轻松地引用对象属性。

在这个示例中，我们使用 with 标签来引用 person 对象，然后在 div 元素中生成一个包含此对象属性的 HTML 内容。

{{#unless condition}}...{{/unless}}

车把的 unless 标签允许程序员根据一个条件判断语句来控制生成的 HTML 内容。

下面是一个示例:

<script id="template" type="text/x-handlebars-template">
    {{#unless isMorning}}
        <h1>Hello, {{name}}!</h1>
    {{/unless}}
</script>

<script>
    const source = document.getElementById("template").innerHTML;
    const template = Handlebars.compile(source);
    const context = {
        name: "World",
        isMorning: true
    };
    const html = template(context);
    document.getElementById("output").innerHTML = html;
</script>

<div id="output"></div>

在此示例中，我们使用了车把的 unless 标签，根据 isMorning 属性的值，决定生成的 HTML 内容。与 if 标签不同，当条件语句的结果为假时，程序员可以生成 HTML 内容。

结语

脚本标签是车把模板中非常有用的元素之一。通过使用这些标签，程序员可以创建灵活的 HTML 模板，并在运行时动态生成内容。

此文介绍了四种常见的脚本标签，分别为 if、each、with 和 unless。程序员可以根据自己的需要掌握更多的标签，以构建更为复杂的网站。

以上是对车把 Template 脚本标签的介绍，希望对您有所帮助。