使用車把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中文網其他相關文章！