Comment créer un modèle de guidon de braise ?

Ember.js est un framework basé sur JavaScript largement utilisé pour créer des applications Web complexes. Le framework permet aux développeurs de créer des applications Web évolutives d'une seule page simplement en utilisant des idiomes courants, des meilleures pratiques et des modèles provenant d'autres modèles d'écosystème d'applications d'une seule page dans le framework.

Le système de modèles de guidons est l'une de ses principales fonctionnalités, offrant un moyen simple mais puissant de créer des pages Web dynamiques. Dans cet article, nous apprendrons comment créer un modèle de guidon de braise.

Que sont les modèles dans Ember ?

Les modèles Ember sont utilisés pour définir l'interface utilisateur (UI) d'une application Web. Les modèles sont écrits à l'aide de la syntaxe Handbars, un langage de modèle simple permettant de créer des pages HTML dynamiques en incorporant des données dans des balises HTML.

Les modèles Ember js utilisent une combinaison de HTML et de syntaxe de gestion pour créer des interfaces utilisateur qui répondent aux modifications de données. Cela inclut une logique telle que des conditions, des boucles et des propriétés calculées, permettant aux développeurs de créer des interfaces utilisateur complexes et dynamiques avec moins de code.

Ils sont structurés sous forme de hiérarchie de composants, où chaque composant représente une partie spécifique de l'interface utilisateur. Ce composant peut inclure d'autres composants pour permettre des structures complexes et imbriquées. Le composant rendu génère du HTML en fonction de son modèle et de toutes les données ou paramètres qui lui sont transmis.

Quel est le modèle de guidon dans Ember ?

Handlebars est un langage de modèles populaire pour créer des pages HTML dynamiques. Il fournit une syntaxe simple pour intégrer des données dans le balisage HTML, permettant aux développeurs de créer des interfaces utilisateur dynamiques et réactives avec un minimum de codage.

Dans guidons, les modèles sont définis à l'aide d'une combinaison de balises HTML et d'expressions guidons. Les expressions de guidon sont entourées de doubles accolades ({{ }}) et peuvent être utilisées pour afficher des données, parcourir des listes et afficher du contenu de manière conditionnelle.

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

Dans ce modèle, l'expression {{#each}} est utilisée pour parcourir la liste d'éléments, et l'expression {{item}} est utilisée pour afficher chaque élément de l'élément de liste (

).

Expressions dans le modèle de guidon

Les expressions sont utilisées pour intégrer du contenu dynamique dans HTML. Ils sont placés entre accolades {{}} et peuvent contenir des variables, des fonctions d'assistance et des instructions conditionnelles.

Supposons que nous ayons une variable appelée "last-name" qui contient une valeur de chaîne "World" et que nous souhaitions l'afficher dans le modèle de guidon, nous pouvons alors utiliser l'expression suivante -

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

Étapes pour créer un modèle de guidon Ember

Pour créer un modèle de guidon de braise, il y a quelques étapes à suivre. Passons en revue les étapes en détail une par une.

Étape 1 : Créer un projet Ember

La première étape de la création d'un modèle Ember Handles consiste à mettre en place un projet Ember.js. Suivez simplement ces étapes pour le faire -

• Installer Ember

npm install -g ember-cli

• Créer une nouvelle application

ember new ember-quickstart --lang en

• Exécutez le serveur

cd ember-quickstart
ember serve

Étape 2 : Créer un nouveau modèle de guidon

Vous avez créé votre projet de braise, il est maintenant temps de créer un nouveau modèle de guidon.

Veuillez noter que les modèles de guidon ont une extension de fichier .hbs et sont généralement stockés dans le répertoire app/templates d'un projet Ember.js.

Maintenant, allez dans Applications/Modèles et créez un nouveau fichier de modèle de guidon, créez simplement un nouveau fichier avec une extension de fichier .hbs. Supposons que nous créions un fichier appelé my-template.hbs.

Étape 3 : Définir le modèle

L'étape suivante consiste à définir le modèle de guidon et à y ajouter du contenu. Comme mentionné précédemment, le modèle de guidon utilise une syntaxe simple pour définir le contenu dynamique. Voici un exemple de modèle de guidon de base -

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

Dans le code ci-dessus, le modèle guidon est défini à l'aide d'un élément div avec la classe "my-new-template". Ici, à l'intérieur d'un div, nous avons défini deux éléments dynamiques à l'aide de la syntaxe guidons. Le premier est un élément h1 avec le texte {{firstname}} et le second est un élément p avec le texte {{lastname}}.

Si vous n'utilisez pas d'outil de build, vous pouvez simplement définir le modèle de votre application en HTML à l'aide de balises de script, voir ci-dessous -

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

Étape 4 : Utiliser le modèle défini

Après avoir défini le modèle guidon, vous pouvez l'utiliser dans votre application Ember.js. Pour ce faire, vous devez créer une route et un contrôleur correspondant pour le rendu du modèle.

Voici un exemple de création d'itinéraires et de contrôleurs à l'aide du modèle guidons my-new-template -

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

Dans cet exemple, la classe MyRoute définit une méthode de modèle qui renvoie un objet avec les propriétés title et body. La classe MyController est vide, mais elle restitue automatiquement le modèle guidons my-new-template car son nom correspond au nom de l'itinéraire.

Étape 5 : Rendre le modèle

La dernière étape consiste à afficher le modèle dans votre application. Pour ce faire, vous devez ajouter une sortie de modèle au fichier de modèle principal de votre application. Voici un exemple de la façon de procéder -

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!