Ember.js 是一個基于 JavaScript 的框架，廣泛用于構建復雜的 Web 應用程序。該框架允許開發人員創建可擴展的單頁 Web 應用程序，只需使用框架中其他單頁應用程序生態系統模式的一些常見習慣用法、最佳實踐和模式。
Handlebars 模板系統是其主要功能之一，它提供了一種簡單而強大的方法來創建動態網頁。在本文中，我們將了解如何創建 ember 車把模板。
Ember 中的模板是什么？
ember 中的模板用于定義 Web 應用程序的用戶界面 (UI)。模板是使用 Handbars 語法編寫的，這是一種簡單的模板語言，用于通過在 HTML 標記中嵌入數據來創建動態 HTML 頁面。
Ember js 模板使用 HTML 和句柄語法的組合來創建用于響應數據更改的用戶界面。這包括條件、循環和計算屬性等邏輯，使開發人員能夠使用更少的代碼創建復雜且動態的 UI。
它們的結構為組件層次結構，其中每個組件代表 UI 的特定部分。該組件可以包括用于允許復雜和嵌套結構的其他組件。呈現的組件根據其模板以及傳遞給它的任何數據或參數生成 HTML。
Ember 中的車把模板是什么？
Handlebars 是一種流行的模板語言，用于創建動態 HTML 頁面。它提供了一種將數據嵌入 HTML 標記的簡單語法，允許開發人員使用最少的代碼創建動態和響應式的用戶界面。
在 Handlebars 中，模板是使用 HTML 標記和 Handlebars 表達式的組合來定義的。 Handlebars 表達式包含在雙花括號 ({{ }}) 中，可用于顯示數據、迭代列表以及有條件地顯示內容。
<ul>
{{#each items as |item|}}
<li>{{item}}</li>
{{/each}}
</ul>
登錄后復制
在此模板中，{{#each}} 表達式用于迭代項目列表，{{item}} 表達式用于顯示列表項 (<li>) 中的每個項目。
車把模板中的表達式
表達式用于將動態內容嵌入到 HTML 中。它們包含在大括號 {{}} 內，并且可能包含變量、輔助函數和條件語句。
假設我們有一個名為“last-name”的變量，其中包含一個字符串值“World”，我們希望將其顯示在 Handlebars 模板中，那么我們可以使用以下表達式 –
<h1>Hello, {{last-name}}!</h1>
登錄后復制
創建 Ember 車把模板的步驟
要創建 ember 車把模板，需要遵循一些步驟。讓我們一一詳細了解步驟。
第 1 步：創建 Ember 項目
創建 Ember Handlebars 模板的第一步是設置 Ember.js 項目。只需按照以下步驟即可完成此操作 –
安裝 Ember
npm install -g ember-cli
登錄后復制
創建新應用
ember new ember-quickstart --lang en
登錄后復制
運行服務器
cd ember-quickstart ember serve
登錄后復制
第 2 步：創建新的車把模板
您已經創建了 ember 項目，現在是時候創建一個新的車把模板了。
請注意，車把模板具有 .hbs 文件擴展名，通常存儲在 Ember.js 項目的 app/templates 目錄中。
現在轉到應用程序/模板并創建一個新的 Handlebars 模板文件，只需創建一個帶有 .hbs 文件擴展名的新文件即可。假設我們創建一個名為 my-template.hbs 的文件。
第 3 步：定義模板
下一步是定義車把模板并向其中添加一些內容。如前所述，車把模板使用簡單的語法來定義動態內容。以下是基本 Handlebars 模板的示例 –
<div class="my-new-template">
<h1>{{firstname}}</h1>
<p>{{lastname}}</p>
</div>
登錄后復制
在上面的代碼中，Handlebars 模板是使用類為“my-new-template”的 div 元素定義的。在這里，在 div 中，我們借助 Handlebars 語法定義了兩個動態元素。第一個是帶有文本 {{firstname}} 的 h1 元素，第二個是帶有文本 {{lastname}} 的 p 元素。
如果您不使用構建工具，那么您可以使用腳本標記在 HTML 中簡單地定義應用程序的模板，請參見下文 –
<html>
<body>
<script type="text/x-handlebars">
<strong>{{firstname}}, {{lastname}}</strong>!
</script>
</body>
</html>
登錄后復制
第 4 步：使用定義的模板
定義 Handlebars 模板后，您可以在 Ember.js 應用程序中使用它。為此，您需要創建一個路由和一個用于渲染模板的相應控制器。
以下是如何使用 my-new-template Handlebars 模板創建路線和控制器的示例 –
// app/routes/my-route.js
import Route from '@ember/routing/route';
export default class MyRoute extends Route {
model() {
return {
firstname: ‘Hello’,
lastname: ‘World’
};
}
}
// app/controllers/my-controller.js
import Controller from '@ember/controller';
export default class MyController extends Controller {
}
登錄后復制
在此示例中，MyRoute 類定義了一個模型方法，該方法返回具有 title 和 body 屬性的對象。 MyController 類是空的，但它會自動渲染 my-new-template Handlebars 模板，因為它的名稱與路線的名稱匹配。
第 5 步：渲染模板
最后一步是在您的應用程序中呈現模板。為此，您需要將模板出口添加到應用程序的主模板文件中。以下是如何執行此操作的示例 –
<!-- app/templates/application.hbs -->
<div class="container">
{{outlet}}
</div>
登錄后復制
在此示例中，主應用程序模板文件定義了一個“container”類的 div 元素。 div 內部有一個模板出口，當 MyRoute 處于活動狀態時，它將渲染 my-new-template Handlebars 模板。
輸出
Hello, World!
登錄后復制
結論
Handlebars 模板是 Ember.js 的重要組件，它使開發人員能夠以最少的代碼和精力開發動態且適應性強的 UI。它使用 HTML 和 Handlebars 表達式的組合來建立可以響應數據更改的模板。在本文中，我們學習了創建 ember 車把模板的步驟。首先，我們建立一個 Ember 項目，然后生成一個新的車把模板，定義模板，使用定義的模板，最后在我們的應用程序中渲染模板。借助 Ember Handlebars 模板，我們可以輕松為其 Web 應用程序構建復雜且動態的 UI。
以上就是如何創建 ember 車把模板？的詳細內容，更多請關注www.92cms.cn其它相關文章！
