Handlebars--Particals (Learn more单纯自己翻译 慎看)

本文详细介绍了Handlebars中的Partials用法,包括基础Partials的注册与使用,动态Partials通过子表达式选择,如何在自定义上下文中执行Partials,传递参数给Partials,以及Partial Blocks的概念和用途。还提到了Inline Partials,允许在模板中定义动态范围的块partial,以实现布局等功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.base partials

为了使用partials 必须要通过Handlebars.registerPartial注册,

Handlebars.registerPaitial('myPartial','{{naem}}')

这里注册了一个叫myPartial的局部模板,这个局部模板会被预编译并且传给第二个参数

回调这个局部模板的语法:

{{> myPartial }}

当这个名为myPartial的局部模板运行时,他将会在当前上下文之执行.

2.Dynamic Partials 动态的

通过使用子表达式语法去动态选择局部模板执行是可能的

{{> (whichPaitial) }}

想要得到这个名为whichPartial是由函数返回的值,然后渲染这个partial

子表达式不会解析方程,所以whichPartial必须是一个函数,如果是一个简单的变量并且有partial名,可以通过helper:lookup来解决

{{> (lookup.'myVariable') }}

3.Partial Contexts

那时可能的去执行局部模板在一个自定义的上下文通过上下文访问partial

(It's possible to execute partials on a custom context by passing in the context to the partial call.)

{{> myPartial  myOtherContext }}

4.Partial Parameters 参数

自定义数据可以通过Hash交给partial

{{> myPartial  parameter=value }}

当partial执行时把value值给parameter

这对于从父context暴露数据给partial是非常有用的

{{> myPartial name=../name }}


5.Partial Blocks(看的一脸懵逼难过)

当试图渲染一个partial没有执行抛出的异常是正常的表现难过?

如果故障转移希望被替代,partial应该使用块语法:

{{#> myPartial }}

  Failcier content

 {{/myPartial }}

如果myPartial partial没有被注册也能执行Fialover content(???握草 一脸懵逼)

{{#> layout }}
  My Content
{{/layout}}

Site Content
{{> @partial-block }}
将执行
Site Content
My Content

When called in this manner, the block will execute under the context of the partial at the time of the call.

Depthed paths and block parameters operate relative to the partial block rather than the partial template.(不会!)

{{#each children as |child|}}
  {{#> childEntry}}
    {{child.value}}
  {{/childEntry}}
{{/each}}

从template渲染child.value而不是partial


6.Inline Partials

templates能定义动态范围的块partial通过inline装饰器

{{#*inline "myPartial"}}
  My Content
{{/inline }}
{{#each children}}
    {{> myPartial}}
{{/each}}
为each child渲染myPartail partial

任何内敛的partial都是可用的对于当前的block和他所有的children,包括执行其他partials

它允许layout templates和类似的功能functionalty

{{#> layout}}

   {{#*inline "nav"}}

   My Nav

   {{/inline }}

   {{#*inline "context"}}

   My Content

   {{/inline}}

{{/layout}}

布局:

<div class="nav">
  {{> nav}}
</div>
<div class="content">
  {{> content}}
</div>

求大神赐我一篇神翻译吧!!!!!!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值