Modèle EmberJS
par Xinyang Qiu
Le modèle EmberJS MVC est écrit par Nathan Totten, Thiago Santos et Xinyang Qiu.
Le modèle EmberJS SPA est conçu pour vous aider à commencer rapidement à créer des applications web côté client interactives à l’aide d’EmberJS.
« Application monopage » (SPA) est le terme général d’une application web qui charge une seule page HTML, puis met à jour dynamiquement la page, au lieu de charger de nouvelles pages. Après le chargement initial de la page, le spa communique avec le serveur via des requêtes AJAX.
AJAX n’est pas nouveau, mais il existe aujourd’hui des frameworks JavaScript qui facilitent la création et la maintenance d’une grande application SPA sophistiquée. En outre, HTML 5 et CSS3 facilitent la création d’interfaces utilisateur riches.
Le modèle EmberJS SPA utilise la bibliothèque JavaScript Ember pour gérer les mises à jour de page à partir des requêtes AJAX. Ember.js utilise la liaison de données pour synchroniser la page avec les données les plus récentes. De cette façon, vous n’avez pas besoin d’écrire le code qui traverse les données JSON et met à jour le DOM. Au lieu de cela, vous placez des attributs déclaratifs dans le code HTML qui indiquent à Ember.js comment présenter les données.
Côté serveur, le modèle EmberJS est presque identique au modèle SPA KnockoutJS. Il utilise ASP.NET MVC pour traiter des documents HTML et API Web ASP.NET pour gérer les requêtes AJAX du client. Pour plus d’informations sur ces aspects du modèle, reportez-vous à la documentation du modèle KnockoutJS . Cette rubrique se concentre sur les différences entre le modèle Knockout et le modèle EmberJS.
Créer un projet de modèle EmberJS SPA
Téléchargez et installez le modèle en cliquant sur le bouton Télécharger ci-dessus. Vous devrez peut-être redémarrer Visual Studio.
Dans le volet Modèles , sélectionnez Modèles installés et développez le nœud Visual C# . Sous Visual C#, sélectionnez Web. Dans la liste des modèles de projet, sélectionnez ASP.NET application web MVC 4. Nommez le projet, puis cliquez sur OK.
Dans l’Assistant Nouveau projet , sélectionnez Ember.js projet SPA.
Vue d’ensemble du modèle EmberJS SPA
Le modèle EmberJS utilise une combinaison de jQuery, Ember.js Handlebars.js pour créer une interface utilisateur fluide et interactive.
Ember.js est une bibliothèque JavaScript qui utilise un modèle MVC côté client.
- Un modèle, écrit dans le langage de création de modèles Handlebars, décrit l’interface utilisateur de l’application. En mode mise en production, le compilateur Handlebars est utilisé pour regrouper et compiler le modèle de guidons.
- Un modèle stocke les données d’application qu’il obtient du serveur (listes ToDo et éléments ToDo).
- Un contrôleur stocke l’état de l’application. Les contrôleurs présentent souvent des données de modèle aux modèles correspondants.
- Une vue traduit les événements primitifs de l’application et les transmet au contrôleur.
- Un routeur gère l’état de l’application, en gardant les URL et les modèles synchronisés.
En outre, la bibliothèque de données Ember peut être utilisée pour synchroniser des objets JSON (obtenus à partir du serveur via une API RESTful) et les modèles clients.
Le modèle EmberJS SPA organise les scripts en huit couches :
- webapi_adapter.js, webapi_serializer.js : étend la bibliothèque de données Ember pour qu’elle fonctionne avec API Web ASP.NET.
- Scripts/helpers.js : définit les nouvelles assistances de guidon d’ember.
- Scripts/app.js : crée l’application et configure l’adaptateur et le sérialiseur.
- Scripts/app/models/*.js : définit les modèles.
- Scripts/app/views/*.js : définit les vues.
- Scripts/app/controllers/*.js : définit les contrôleurs.
- Scripts/app/routes, Scripts/app/router.js : définit les itinéraires.
- Templates/*.hbs : définit les modèles de guidon.
Examinons certains de ces scripts plus en détail.
Modèles
Les modèles sont définis dans le dossier Scripts/app/models. Il existe deux fichiers de modèle : todoItem.js et todoList.js.
todo.model.js définit les modèles côté client (navigateur) pour les listes de tâches. Il existe deux classes de modèle : todoItem et todoList. Dans Ember, les modèles sont des sous-classes de DS. Modèle. Un modèle peut avoir des propriétés avec des attributs :
todoItemId: attr('number'),
title: attr('string')
Les modèles peuvent définir des relations avec d’autres modèles :
todoList: DS.belongsTo('App.TodoList'),
Les modèles peuvent avoir des propriétés calculées qui se lient à d’autres propriétés :
hasError: function () {
var currentError = this.get("error");
return !(currentError === '' || currentError === null);
}.property('error'),
Les modèles peuvent avoir des fonctions d’observateur, qui sont appelées lorsqu’une propriété observée change :
saveCheckbox: function () {
if(this.get("isDirty")){
if (this.get("todoItemId")) {
App.store.commit();
}
}
}.observes('isDone'),
Les vues
Les vues sont définies dans le dossier Scripts/app/views. Une vue traduit les événements de l’interface utilisateur de l’application. Un gestionnaire d’événements peut rappeler les fonctions du contrôleur ou appeler directement le contexte de données.
Par exemple, le code suivant provient de vues/TodoItemEditView.js. Il définit la gestion des événements pour un champ de texte d’entrée.
App.TodoItemEditView = Em.TextField.extend({
lastValue: '',
focusIn: function (evt) {
this.lastValue = this.get('parentView').templateData.view.content.get("title");
},
focusOut: function (evt) {
this.changeContent();
},
insertNewline: function (evt) {
$(evt.target).blur();
},
changeContent: function () {
var todoItem = this.get('parentView').templateData.view.content;
var newValue = todoItem.get("title");
if (this.lastValue != newValue) {
App.store.commit();
this.lastValue = newValue;
}
}
});
Contrôleur
Les contrôleurs sont définis dans le dossier Scripts/app/controllers. Pour représenter un modèle unique, étendez Ember.ObjectController:
App.TodoItemController = Ember.ObjectController.extend({
});
Un contrôleur peut également représenter une collection de modèles en étendant Ember.ArrayController. Par exemple, le TodoListController représente un tableau d’objets todoList . Le contrôleur trie par ID todoList, dans l’ordre décroissant :
App.TodoListController = Ember.ArrayController.extend({
error: "",
sortProperties: ['todoListId'],
sortAscending: true,
// ...
Le contrôleur définit une fonction nommée addTodoList, qui crée un todoList et l’ajoute au tableau. Pour voir comment cette fonction est appelée, ouvrez le fichier de modèle nommé todoListTemplate.html, dans le dossier Templates. Le code de modèle suivant lie un bouton à la addTodoList fonction :
<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>
Le contrôleur contient également une error propriété qui contient un message d’erreur. Voici le code du modèle pour afficher le message d’erreur (également dans todoListTemplate.html) :
<p class="error">{{error}}</p>
Itinéraires
Router.js définit les itinéraires et le modèle par défaut à afficher, configure l’état de l’application et fait correspondre les URL aux itinéraires :
App.Router.map(function () {
this.route("index", { path: "/" });
this.route("about");
this.route("todoList", { path: "/todo" });
});
TodoListRoute.js charge les données de TodoListRoute en remplaçant la fonction setupController :
App.TodoListRoute = Ember.Route.extend({
setupController: function (controller, model) {
controller.set('content', App.TodoList.find());
}
});
Ember utilise des conventions de nommage pour faire correspondre des URL, des noms de routes, des contrôleurs et des modèles. Pour plus d’informations, consultez http://emberjs.com/guides/routing/defining-your-routes/ la documentation EmberJS.
Modèles
Le dossier Templates contient quatre modèles :
- application.hbs : modèle par défaut qui est rendu lorsque l’application est démarrée.
- about.hbs : modèle pour l’itinéraire « /about ».
- index.hbs : modèle de l’itinéraire racine « / ».
- todoList.hbs : modèle pour l’itinéraire « /todo ».
- _navbar.hbs : le modèle définit le menu de navigation.
Le modèle d’application agit comme une page master. Il contient un en-tête, un pied de page et un « {{outlet}} » dans lequel insérer d’autres modèles en fonction de l’itinéraire. Pour plus d’informations sur les modèles d’application dans Ember, consultez http://guides.emberjs.com/v1.10.0/templates/the-application-template//.
Le modèle « /todoList » contient deux expressions de boucle. La boucle externe est {{#each controller}}, et la boucle interne est {{#each todos}}. Le code suivant montre une vue intégrée Ember.Checkbox , une vue personnalisée App.TodoItemEditViewet un lien avec une deleteTodo action.
{{view Ember.Checkbox checkedBinding="isDone"}}
{{view App.TodoItemEditView valueBinding="title" class="required" disabledBinding="isDone"}}
<a href="#" {{action "deleteTodo" on="click" target="view"}}>X</a>
La HtmlHelperExtensions classe, définie dans Controllers/HtmlHelperExtensions.cs, définit une fonction d’assistance pour mettre en cache et insérer des fichiers de modèle lorsque le débogage a la valeur true dans le fichier Web.config. Cette fonction est appelée à partir du fichier de vue MVC ASP.NET défini dans Views/Home/App.cshtml :
@if (HttpContext.Current.IsDebuggingEnabled)
{
@Html.RenderEmber()
}
else
{
@Scripts.Render("~/bundles/templates")
}
Appelée sans argument, la fonction restitue tous les fichiers de modèle dans le dossier Templates. Vous pouvez également spécifier un sous-dossier ou un fichier de modèle spécifique.
Lorsque le débogage est false dans Web.config, l’application inclut l’élément groupé « ~/bundles/templates ». Cet élément groupé est ajouté dans BundleConfig.cs, à l’aide de la bibliothèque du compilateur Handlebars :
if (!HttpContext.Current.IsDebuggingEnabled)
{
bundles.Add(new Bundle("~/bundles/templates",
new EmberHandlebarsBundleTransform()).Include(
"~/scripts/app/templates/*.hbs"
));
}