Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/.vitepress/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ export default defineConfig({
{ text: "介绍", link: "/" },
{ text: "表达式", link: "/expressions" },
{ text: "代码片段", link: "/partials" },
{ text: "代码片段", link: "/block-helpers" },
{ text: "块助手代码", link: "/block-helpers" },
{ text: "内置助手代码", link: "/builtin-helpers" },
{ text: "钩子", link: "/hooks" },
],
Expand Down
62 changes: 32 additions & 30 deletions src/zh/guide/block-helpers.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# 代码片段
# 块助手代码

块助手代码使得调用通过传递上下文参数的代码块的迭代器或自定义函数成为可能
块助手代码可以让你自定义迭代器以及其他功能,这些功能可以通过传入新的上下文来执行其内部的块

## 基本代码块
## 基本助手代码

出于演示目的,让我们先定义一个和没有块助手代码一样的块助手代码
为了演示,我们来定义一个助手代码,其作用是直接执行其内部块,就像该助手不存在一样

```handlebars
<div class="entry">
Expand All @@ -24,18 +24,19 @@ Handlebars.registerHelper("noop", function (options) {
});
```

Handlebars 将 `this` 指针作为上下文传递,因此你可以使用 `this` 调用该代码块以在上下文内使用代码块。
Handlebars 调用 helper 函数时,上下文对象会绑定为 `this` 指针。因此你可以为 `options.fn` 传入 `this`
以在当前上下文中执行 `noop` 内部块。

通过这种方式定义的任何助手代码将优先于上下文中定义的字段。若要访问助手代码中的字段,可以使用路径引用。在上面的示例中,上下文对象上名为
通过这种方式定义的任何助手代码都将优先于上下文中定义的字段。若要访问被助手代码名称“遮蔽”的字段,可以使用路径引用。在上面的示例中,上下文对象中名为
`noop` 的字段可以这样引用:

```handlebars
{{./noop}}
```

## 基本代码块的变化
## 基本助手代码的变体

为了更好地说明语法,让我们定义另一个块助手代码,为包装的文本添加一些标记
为了更好地说明语法,让我们定义另一个助手代码,为包裹的文本添加一些标记

```handlebars
<div class="entry">
Expand All @@ -46,7 +47,7 @@ Handlebars 将 `this` 指针作为上下文传递,因此你可以使用 `this`
</div>
```

粗体助手代码将添加标记以使其文本变为粗体。和以前一样,该函数将上下文作为输入并返回一个字符串
`bold`助手代码将添加标记,使内部文本变为粗体。和之前一样,该函数接收上下文作为输入并返回一个字符串

```js
Handlebars.registerHelper("bold", function (options) {
Expand All @@ -56,7 +57,8 @@ Handlebars.registerHelper("bold", function (options) {

## `with` 助手代码

`with` 助手代码演示了如何将参数传递给你的助手代码。当将参数传递给助手代码时,模板传入的任何上下文中都会接收该参数。
`with` 助手代码演示了如何将参数传递给你的助手。当 `with`
助手被调用并传入参数时,它会使用模板传入的参数作为上下文来执行。

```handlebars
<div class="entry">
Expand All @@ -68,7 +70,8 @@ Handlebars.registerHelper("bold", function (options) {
</div>
```

如果你的 JSON 对象中包含深层嵌套属性,你就会发现这样的助手代码很有用。想要避免重复父名称。上面的模板可能要与这样的 JSON 搭配使用:
如果你的 JSON 对象中包含深层嵌套属性,并且你想要避免重复父名称,你就会发现 `with`
助手很有用。上面的模板可以用于以下 JSON 数据:

```js
{
Expand Down Expand Up @@ -119,7 +122,7 @@ Handlebars.registerHelper("with", function (context, options) {
</div>
```

这种情况下,我们要为 comments 数组中的每个元素调用一次 `each` 的代码块
这种情况下,我们要为 comments 数组中的每个元素调用一次 `each` 内部的代码块

```js
Handlebars.registerHelper("each", function (context, options) {
Expand All @@ -133,7 +136,7 @@ Handlebars.registerHelper("each", function (context, options) {
});
```

这种情况下,我们遍历传递的参数中的项目,对每个项目调用一次该代码块。遍历完毕之后,我们建立一个 String 结果,然后返回它
这种情况下,我们遍历传递的参数中的项目,对每个项目调用一次该代码块。在遍历过程中,我们建立一个 String 结果,然后将其返回

此模式可用于实现更高级的迭代器。例如,让我们创建一个迭代器 `<ul>` 包装器,并将每个结果元素包装在 `<li>` 中。

Expand All @@ -143,7 +146,7 @@ Handlebars.registerHelper("each", function (context, options) {
{{/list}}
```

你将使用类似以下内容的上下文来使用该模板
你需要使用类似以下内容的上下文来执行该模板

```js
{
Expand Down Expand Up @@ -205,8 +208,8 @@ Handlebars.registerHelper("if", function (conditional, options) {
});
```

编写条件代码块时,你通常会希望模板可以提供“如果条件的计算结果为 false” 时助手代码应插入的 HTML 代码。Handlebars 通过提供
`else` 来解决这个问题
编写条件语句时,你通常会希望模板能够提供一个 HTML 块,当条件为false时,你的助手应该插入该块。Handlebars 通过为块级助手提供通用的
`else` 功能来解决这个问题

```handlebars
{{#if isActive}}
Expand All @@ -216,7 +219,7 @@ Handlebars.registerHelper("if", function (conditional, options) {
{{/if}}
```

Handlebars 使用 `options.inverse` 为 `else` 片段提供了代码块。你不需要检查是否存在 `else`
Handlebars 将 `else` 片段的模板块作为 `options.inverse` 提供。你不需要检查是否存在 `else`
片段:Handlebars 将自动检测并注册一个 `noop` 函数。

```js
Expand All @@ -231,7 +234,7 @@ Handlebars.registerHelper("if", function (conditional, options) {

Handlebars 通过 options 参数给块助手代码提供附加元数据。下文有更多示例。

通通过将后续的助手代码调用包含在 `else` 模板中,也可以连接条件语句
条件语句也可以通过在 `else` 片段中包含后续的助手调用来链式使用

```handlebars
{{#if isActive}}
Expand All @@ -241,22 +244,21 @@ Handlebars 通过 options 参数给块助手代码提供附加元数据。下文
{{/if}}
```

后续调用中不必使用相同的助手代码,除非可以在 `else`
块中该助手代码可以和其他的助手代码一同使用。当助手代码不同时,关闭模板语法应与打开的助手代码名称相匹配
后续调用中不必使用相同的助手代码,`unless` 助手也可以像 `if` 一样在 `else`
中使用。当助手代码不同时,关闭标签应与打开的助手代码名称相匹配

## Hash 参数

与普通的助手代码一样,块助手代码可以接受可选的 Hash 作为其最终参数。让我们重新看看 `list`
帮助器并使我们可以将任意数量的可选属性添加到将要创建的 `<ul>` 元素中。
与普通的助手代码一样,助手代码代码可以接受可选的 Hash 作为其最终参数。让我们回到 `list`
助手代码,并让它能够将任意数量的可选属性添加到将要创建的 `<ul>` 元素中。

```handlebars
{{#list nav id="nav-bar" class="top"}}
<a href="{{url}}">{{title}}</a>
{{/list}}
```

Handlebars 在 `options.hash`
中提供最后一个 Hash。这样可以更轻松地接受可变数量的参数,同时也接受可选的 Hash。如果模板未提供 Hash 参数,则 Handlebars 将自动传递空对象(`{}`),因此你无需检查 Hash 参数是否存在。
Handlebars 将最终的哈希参数作为 options.hash 提供。这使得接受可变数量的参数,同时又接受一个可选的哈希变得更加容易。如果模板未提供 Hash 参数,则 Handlebars 将自动传递空对象(`{}`),因此你无需检查 Hash 参数是否存在。

```js
Handlebars.registerHelper("list", function (context, options) {
Expand All @@ -280,7 +282,7 @@ Handlebars.registerHelper("list", function (context, options) {
});
```

Hash 参数提供了一种强大的方法,可以为块助手代码提供许多可选参数,而无需使得这件事因为参数位置的问题而变得更复杂
Hash 参数提供了一种强大的方法,可以为块助手代码提供多个可选参数,而不会因为参数位置的问题而变得更复杂

块助手代码还可以将局部变量注入其子模板。这对于添加不在上下文中的其他数据很有用。

Expand Down Expand Up @@ -319,9 +321,9 @@ Handlebars.registerHelper("list", function (context, options) {

可以通过路径查询来访问父范围中定义的局部变量。若要访问父级的 `index` ,可以使用 `@../index`。

确保你创建的数据模型中每个助手代码只能接触到其自己的局部变量。否则,内层的助手代码可能意外地改变了外层的变量。
确保每个助手代码中都创建了新的数据对象。否则,内层的助手代码可能意外地改变了外层的变量。

还要在使用 `data` 前确保 `data` 已经被定义。局部变量很可能是按情况编译的,某些模板可能不会创建某些变量
还要在使用 `data` 前确保 `data` 已经被定义。局部变量很可能是按情况编译的,某些模板可能不会创建这个字段

## 代码块参数

Expand Down Expand Up @@ -356,9 +358,9 @@ Handlebars.registerHelper("list", function (context, options) {
助手代码可以通过 `options.fn.blockParams`
字段确定模板引用的代码块参数的数量(整数)。这个值表示了子模板可以引用的代码块参数的数量。超出此数量的参数将不会被引用,并且可以根据需要安全地忽略。这是可选的,并且传递给模板的所有其他参数都将被忽略。

## RAW 代码块
## 原始块

RAW 代码块可用于处理不经由 mustache 模板处理的代码块。
原始块可用于那些需要处理未被解析的模板块

<Example examplePage="/zh/examples/raw-blocks.md" show="template"/>

Expand All @@ -368,7 +370,7 @@ RAW 代码块可用于处理不经由 mustache 模板处理的代码块。
{{/raw-helper}}
```

将会执行 `raw-helper` 助手代码而不解释其内容
将会执行 `raw-helper` 助手代码而不解析其内容

```js
Handlebars.registerHelper("raw-helper", function (options) {
Expand Down