首頁 > 文章 > web前端 > 如何建立 ember 車把模板？

如何建立 ember 車把模板？

PHPz轉載: 2023-09-19 10:09:031411瀏覽

如何创建 ember 车把模板？

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}} 表達式用於顯示列表項 (25edfb22a4f469ecb59f1190150159c6) 中的每個項目。

車把模板中的表達式

表達式用於將動態內容嵌入到 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 車把模板？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 字符串循环 JS 对象 li ui

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：CSS 輪廓樣式屬性下一篇：CSS 輪廓樣式屬性

看更多