Wie erstelle ich eine Ember-Lenkervorlage?

Ember.js ist ein JavaScript-basiertes Framework, das häufig zum Erstellen komplexer Webanwendungen verwendet wird. Das Framework ermöglicht es Entwicklern, skalierbare Single-Page-Webanwendungen zu erstellen, indem sie einfach einige gängige Redewendungen, Best Practices und Muster aus anderen Mustern des Single-Page-Anwendungsökosystems im Framework verwenden.

Das Template-System von Handlebars ist eine seiner Hauptfunktionen und bietet eine einfache, aber leistungsstarke Möglichkeit, dynamische Webseiten zu erstellen. In diesem Artikel erfahren Sie, wie Sie eine Ember-Lenkervorlage erstellen.

Was sind Vorlagen in Ember?

Ember-Vorlagen werden verwendet, um die Benutzeroberfläche (UI) einer Webanwendung zu definieren. Vorlagen werden mit der Handbars-Syntax geschrieben, einer einfachen Vorlagensprache zum Erstellen dynamischer HTML-Seiten durch Einbetten von Daten in HTML-Tags.

Ember js-Vorlagen verwenden eine Kombination aus HTML und Handle-Syntax, um Benutzeroberflächen zu erstellen, die auf Datenänderungen reagieren. Dazu gehört Logik wie Bedingungen, Schleifen und berechnete Eigenschaften, sodass Entwickler komplexe und dynamische Benutzeroberflächen mit weniger Code erstellen können.

Sie sind als Komponentenhierarchie strukturiert, wobei jede Komponente einen bestimmten Teil der Benutzeroberfläche darstellt. Diese Komponente kann weitere Komponenten umfassen, um komplexe und verschachtelte Strukturen zu ermöglichen. Die gerenderte Komponente generiert HTML basierend auf ihrer Vorlage und allen an sie übergebenen Daten oder Parametern.

Was ist die Lenkervorlage in Ember?

Handlebars ist eine beliebte Vorlagensprache zum Erstellen dynamischer HTML-Seiten. Es bietet eine einfache Syntax zum Einbetten von Daten in HTML-Markup und ermöglicht Entwicklern die Erstellung dynamischer und reaktionsfähiger Benutzeroberflächen mit minimalem Programmieraufwand.

In Handlers werden Vorlagen mithilfe einer Kombination aus HTML-Tags und Handlers-Ausdrücken definiert. Handles-Ausdrücke werden in doppelte geschweifte Klammern ({{ }}) eingeschlossen und können zum Anzeigen von Daten, zum Durchlaufen von Listen und zum bedingten Anzeigen von Inhalten verwendet werden.

<ul>
   {{#each items as |item|}}
      <li>{{item}}</li>
   {{/each}}
</ul>

In dieser Vorlage wird der Ausdruck {{#each}} verwendet, um die Liste der Elemente zu durchlaufen, und der Ausdruck {{item}} wird verwendet, um jedes Element im Listenelement anzuzeigen (

).

Ausdrücke in der Lenkervorlage

Ausdrücke werden verwendet, um dynamische Inhalte in HTML einzubetten. Sie sind in geschweifte Klammern {{}} eingeschlossen und können Variablen, Hilfsfunktionen und bedingte Anweisungen enthalten.

Angenommen, wir haben eine Variable namens „Nachname“, die einen Zeichenfolgenwert „Welt“ enthält, und wir möchten ihn in der Vorlage „Lenker“ anzeigen. Dann können wir den folgenden Ausdruck verwenden -

<h1>Hello, {{last-name}}!</h1>

Schritte zum Erstellen einer Ember-Lenkervorlage

Um eine Ember-Lenker-Vorlage zu erstellen, müssen Sie einige Schritte befolgen. Lassen Sie uns die Schritte einzeln durchgehen.

Schritt 1: Ember-Projekt erstellen

Der erste Schritt beim Erstellen einer Ember-Lenker-Vorlage besteht darin, ein Ember.js-Projekt einzurichten. Befolgen Sie dazu einfach diese Schritte -

• Installieren Sie Ember

npm install -g ember-cli

• Neue App erstellen

ember new ember-quickstart --lang en

• Führen Sie den Server aus

cd ember-quickstart
ember serve

Schritt 2: Erstellen Sie eine neue Lenkervorlage

Sie haben das Ember-Projekt erstellt. Jetzt ist es an der Zeit, eine neue Lenkervorlage zu erstellen.

Bitte beachten Sie, dass Lenkervorlagen die Dateierweiterung .hbs haben und normalerweise im Verzeichnis app/templates eines Ember.js-Projekts gespeichert werden.

Gehen Sie nun zu Anwendungen/Vorlagen und erstellen Sie eine neue Lenker-Vorlagendatei. Erstellen Sie einfach eine neue Datei mit der Dateierweiterung .hbs. Angenommen, wir erstellen eine Datei namens my-template.hbs.

Schritt 3: Vorlage definieren

Der nächste Schritt besteht darin, die Lenkervorlage zu definieren und ihr einige Inhalte hinzuzufügen. Wie bereits erwähnt, verwendet die Lenkervorlage eine einfache Syntax, um dynamische Inhalte zu definieren. Hier ist ein Beispiel einer einfachen Vorlage für Lenker –

<div class="my-new-template">
   <h1>{{firstname}}</h1>
   <p>{{lastname}}</p>
</div>

Im obigen Code wird die Lenkervorlage mithilfe eines div-Elements mit der Klasse „my-new-template“ definiert. Hier haben wir innerhalb eines Div zwei dynamische Elemente mit Hilfe der Handlers-Syntax definiert. Das erste ist ein h1-Element mit dem Text {{firstname}} und das zweite ist ein p-Element mit dem Text {{lastname}}.

Wenn Sie kein Build-Tool verwenden, können Sie die Vorlage Ihrer Anwendung einfach in HTML mithilfe von Skript-Tags definieren, siehe unten -

<html>
<body>
   <script type="text/x-handlebars">
      <strong>{{firstname}}, {{lastname}}</strong>!
   </script>
</body>
</html>

Schritt 4: Definierte Vorlage verwenden

Nachdem Sie die Lenkervorlage definiert haben, können Sie sie in Ihrer Ember.js-Anwendung verwenden. Dazu müssen Sie eine Route und einen entsprechenden Controller zum Rendern der Vorlage erstellen.

Hier ist ein Beispiel für die Erstellung von Routen und Controllern mit der My-New-Template-Lenkervorlage -

// 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 {
}

In diesem Beispiel definiert die MyRoute-Klasse eine Modellmethode, die ein Objekt mit Titel- und Körpereigenschaften zurückgibt. Die MyController-Klasse ist leer, rendert jedoch automatisch die Lenkervorlage „my-new-template“, da ihr Name mit dem Namen der Route übereinstimmt.

Schritt 5: Rendern Sie die Vorlage

Der letzte Schritt besteht darin, die Vorlage in Ihrer Anwendung zu rendern. Dazu müssen Sie der Hauptvorlagendatei Ihrer Anwendung einen Vorlagenausgang hinzufügen. Hier ist ein Beispiel dafür -

<!-- 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。

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Ember-Lenkervorlage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!