使用车把4.0使用内联部分和装饰器

>车把是一个流行的JavaScript模板库，用于客户端和服务器端渲染，扩展了用于改进模板管理的胡须规范。 对于新移民，建议通过多元课程探索使用车把模板的JavaScript模板。 车把4.0（2015年9月）引入了重大增强功能：内联部分和装饰器。本文探讨了他们的语法和最佳用法。

>

密钥概念：

• >车把4.0的关键特征：内联部分（可重复使用的模板）和装饰器（修改渲染状态）。
• 内联部分：在模板中定义，消除了对JavaScript注册的需求。 它们是块被划分的，将当前和嵌套范围的用法限制在使用。适用于小型，可重复使用的HTML片段的理想选择。
• 装饰器：修改车把程序功能，影响执行前的运行时。 对于更改上下文数据或帮助者很有用。
>
• 装饰器改善了代码模块化，可扩展性和可检验性，特别有益于货币格式等任务。
• 这两种功能都简化了前端开发，从而导致更清洁，更有条理且可能更有效的代码。

内联部分

partials是一种常见的模板概念，它通过将可重复使用的模板分隔为单个文件来促进代码重复使用。 但是，车把的传统部分有局限性：全球范围，需要JavaScript注册（尽管经常由兼容者处理），并与其用法上下文分开。 这通常将它们的用途限制在最大的可重复使用的代码块中。

> >

使用内联部分

>通过将可重复使用的代码用

包装来声明内联部分。 然后，通过{{#* inline "partialName"}} ... {{/inline}}。 {{> partialName}}

>示例：

而不是重复

{{firstName}} {{lastName}} ，请使用内联部分：

<li>{{firstName}} {{lastName}}</li>

比较部分和内联部分

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

> 考虑一个重复的模板：

>

• 传统部分：需要一个单独的JavaScript文件才能登记>，然后在模板中使用为>。 这将部分的定义分开，使理解完整的模板更具挑战性。 Handlebars.registerPartial('fullName', '{{firstName}} {{lastName}}'); {{> fullName}}

内联部分：一种清洁，独立的方法：>

• 装饰

{{#* inline "fullName"}}
    {{firstName}} {{lastName}}
{{/inline}}

{{#each clients}}
    <li>{{> fullName}}</li>
{{/each}}

装饰器修改车把程序功能，从而影响渲染过程。 它们提供元数据以增强模板功能，充当辅助功能的更基本伴侣。

>车把汇编涉及：1。获取模板； 2。编译； 3。渲染输出。 装饰器干预汇编步骤（），影响了块被编译的功能。 他们在渲染前控制执行，允许修改到上下文数据或助手。>

使用装饰

Handlebars.compile>使用

注册装饰器。 该函数接收

。

Handlebars.registerDecorator()：编译的车把功能。 修改参数，返回值或上下文。(program, props, container, context)>

>

• ：在此处设置的属性会影响程序功能，即使被替换也是如此。 对元数据有用。program
• ： handlebars Runtime容器（部分，助手，上下文）。修改。 props
：父上下文，包括装饰符参数和数据。
• container装饰器必须返回函数（或虚假的值）才能渲染修改模板。
>
• >示例：货币格式context 在手柄4.0之前，货币格式通常依赖于助手。 装饰器提供了更优雅的解决方案。

装饰器可以根据上下文动态注册货币格式的辅助器：

然后，在模板中：

与单独使用助手相比，这种方法更模块化，可扩展和可测试。

结论

内联部分和装饰器可显着增强车把，改善代码组织，可重用性和可测试性。 它们是构建更可维护和高效的前端应用程序的宝贵工具。

>

以上是使用车把4.0使用内联部分和装饰器的详细内容。更多信息请关注PHP中文网其他相关文章！