Modello EmberJS

di Xinyang Qiu

Il modello MVC di EmberJS è scritto da Nathan Totten, Thiago Santos e Xizhou Qiu.

Scaricare il modello MVC EmberJS

Il modello SPA EmberJS è progettato per iniziare a creare rapidamente app Web interattive sul lato client usando EmberJS.

"Applicazione a pagina singola" (SPA) è il termine generale per un'applicazione Web che carica una singola pagina HTML e quindi aggiorna la pagina in modo dinamico, invece di caricare nuove pagine. Dopo il caricamento iniziale della pagina, l'applicazione a pagina singola comunica con il server tramite richieste AJAX.

AJAX non è niente di nuovo, ma oggi ci sono framework JavaScript che semplificano la compilazione e la gestione di un'applicazione a pagina singola sofisticata di grandi dimensioni. Inoltre, HTML 5 e CSS3 semplificano la creazione di interfacce utente avanzate.

Il modello SPA EmberJS usa la libreria JavaScript Ember per gestire gli aggiornamenti delle pagine dalle richieste AJAX. Ember.js usa il data binding per sincronizzare la pagina con i dati più recenti. In questo modo, non è necessario scrivere alcun codice che illustra i dati JSON e aggiorna il DOM. Si inserisce invece attributi dichiarativi nel codice HTML che indicano Ember.js come presentare i dati.

Sul lato server, il modello EmberJS è quasi identico al modello SPA KnockoutJS. Usa ASP.NET MVC per gestire i documenti HTML e ASP.NET API Web per gestire le richieste AJAX dal client. Per altre informazioni su questi aspetti del modello, vedere la documentazione del modello KnockoutJS . Questo argomento è incentrato sulle differenze tra il modello Knockout e il modello EmberJS.

Creare un progetto modello SPA EmberJS

Scaricare e installare il modello facendo clic sul pulsante Scarica sopra. Potrebbe essere necessario riavviare Visual Studio.

Nel riquadro Modelli selezionare Modelli installati ed espandere il nodo Visual C# . In Visual C# selezionare Web. Nell'elenco dei modelli di progetto selezionare ASP.NET'applicazione Web MVC 4. Assegnare al progetto il nome e fare clic su OK.

Nella procedura guidata Nuovo progetto selezionare Ember.js progetto SPA.

Panoramica del modello SPA EmberJS

Il modello EmberJS usa una combinazione di jQuery, Ember.js, Handlebars.js per creare un'interfaccia utente interattiva uniforme.

Ember.js è una libreria JavaScript che usa un modello MVC lato client.

• Un modello, scritto nel linguaggio di creazione di modelli handlebars, descrive l'interfaccia utente dell'applicazione. In modalità release, il compilatore Handlebars viene usato per raggruppare e compilare il template di Handlebars.
• Un modello archivia i dati dell'applicazione che ottiene dal server (elenchi ToDo ed elementi ToDo).
• Un controller archivia lo stato dell'applicazione. I controller presentano spesso i dati del modello ai modelli corrispondenti.
• Una visualizzazione converte gli eventi primitivi dall'applicazione e li passa al controller.
• Un router gestisce lo stato dell'applicazione, mantenendo sincronizzati gli URL e i modelli.

Inoltre, la libreria di dati Ember può essere usata per sincronizzare gli oggetti JSON (ottenuti dal server tramite un'API RESTful) e i modelli client.

Il modello SPA EmberJS organizza gli script in otto livelli:

• webapi_adapter.js, webapi_serializer.js: estende la libreria dati di Ember per l'uso con ASP.NET API Web.
• Script/helpers.js: definisce i nuovi helper di Handlebars di Ember.
• Script/app.js: crea l'app e configura l'adattatore e il serializzatore.
• Script/app/models/*.js: definisce i modelli.
• Script/app/views/*.js: definisce le visualizzazioni.
• Script/app/controllers/*.js: definisce i controller.
• Script/app/route, script/app/router.js: definisce le route.
• Templates/*.hbs: definisce i modelli di handlebar.

Esaminiamo alcuni di questi script in modo più dettagliato.

Models

I modelli sono definiti nella cartella Scripts/app/models. Sono disponibili due file di modello: todoItem.js e todoList.js.

todo.model.js definisce i modelli lato client (browser) per gli elenchi di to-do. Esistono due classi di modello: todoItem e todoList. In Ember i modelli sono sottoclassi di DS. Modello. Un modello può avere proprietà con attributi:

todoItemId: attr('number'), 
title: attr('string')

I modelli possono definire relazioni con altri modelli:

todoList: DS.belongsTo('App.TodoList'),

I modelli possono avere proprietà calcolate che si associano ad altre proprietà:

hasError: function () {
    var currentError = this.get("error");
    return !(currentError === '' || currentError === null);
}.property('error'),

I modelli possono avere funzioni observer, che vengono richiamate quando cambia una proprietà osservata:

saveCheckbox: function () {
    if(this.get("isDirty")){
        if (this.get("todoItemId")) {
            App.store.commit();
        }
    }
}.observes('isDone'),

Views

Le visualizzazioni vengono definite nella cartella Scripts/app/views. Una visualizzazione traduce gli eventi dall'interfaccia utente dell'applicazione. Un gestore eventi può richiamare le funzioni del controller o semplicemente chiamare direttamente il contesto dati.

Ad esempio, il codice seguente proviene da visualizzazioni/TodoItemEditView.js. Definisce la gestione degli eventi per un campo di testo di input.

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;
        }
    }
});

Controller

I controller sono definiti nella cartella Scripts/app/controllers. Per rappresentare un singolo modello, estendere Ember.ObjectController:

App.TodoItemController = Ember.ObjectController.extend({
});

Un controller può anche rappresentare una raccolta di modelli estendendo Ember.ArrayController. Ad esempio, TodoListController rappresenta una matrice di todoList oggetti. Il controller ordina in base all'ID todoList, in ordine decrescente:

App.TodoListController = Ember.ArrayController.extend({
    error: "",
    sortProperties: ['todoListId'],
    sortAscending: true,

    // ...

Il controller definisce una funzione denominata addTodoList, che crea un nuovo todoList e lo aggiunge alla matrice. Per vedere come questa funzione viene chiamata, aprire il file modello denominato todoListTemplate.html, nella cartella Templates. Il codice del modello seguente associa un pulsante alla addTodoList funzione:

<input type="button" {{action "addTodoList"}} class="isActive" value="Add Todo list"></input>

Il controller contiene anche una error proprietà che contiene un messaggio di errore. Ecco il codice del modello per visualizzare il messaggio di errore (anche in todoListTemplate.html):

<p class="error">{{error}}</p>

Percorsi

Router.js definisce le route e il modello predefinito da visualizzare, configura lo stato dell'applicazione e associa gli URL alle route:

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("about");
    this.route("todoList", { path: "/todo" });
});

TodoListRoute.js carica i dati per TodoListRoute eseguendo l'override della funzione setupController:

App.TodoListRoute = Ember.Route.extend({
    setupController: function (controller, model) {
        controller.set('content', App.TodoList.find());
    }
});

Ember usa convenzioni di denominazione per trovare corrispondenze con URL, nomi di route, controller e template. Per altre informazioni, vedere http://emberjs.com/guides/routing/defining-your-routes/ la documentazione di EmberJS.

Modelli

La cartella Templates contiene quattro modelli:

• application.hbs: modello predefinito di cui viene eseguito il rendering all'avvio dell'applicazione.
• about.hbs: Il modello per il percorso "/about".
• index.hbs: il modello per la route radice "/".
• todoList.hbs: modello per la route "/todo".
• _navbar.hbs: il modello definisce il menu di spostamento.

Il modello di applicazione funge da pagina master. Contiene un'intestazione, un piè di pagina e un "{{outlet}}" per inserire altri modelli in base al percorso. Per altre informazioni sui modelli di applicazione in Ember, vedere http://guides.emberjs.com/v1.10.0/templates/the-application-template//.

Il modello "/todoList" contiene due espressioni di ciclo. Il ciclo esterno è {{#each controller}}e il ciclo interno è {{#each todos}}. Il codice seguente mostra una visualizzazione predefinita Ember.Checkbox , un oggetto personalizzato App.TodoItemEditViewe un collegamento con un'azione deleteTodo .

{{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, definita in Controllers/HtmlHelperExtensions.cs, definisce una funzione helper per memorizzare nella cache e inserire i file modello quando il debug è impostato su true nel file Web.config. Questa funzione viene chiamata dal file di visualizzazione MVC ASP.NET definito in Views/Home/App.cshtml:

@if (HttpContext.Current.IsDebuggingEnabled)
{
    @Html.RenderEmber()
}
else
{
    @Scripts.Render("~/bundles/templates")
}

Chiamata senza argomenti, la funzione rende tutti i file di modello nella cartella Templates. È anche possibile specificare una sottocartella o un file modello specifico.

Quando il debug è false in Web.config, l'applicazione include l'elemento bundle "~/bundles/templates". Questo elemento bundle viene aggiunto in BundleConfig.cs, usando la libreria del compilatore Handlebars:

if (!HttpContext.Current.IsDebuggingEnabled)
{
    bundles.Add(new Bundle("~/bundles/templates", 
        new EmberHandlebarsBundleTransform()).Include(
            "~/scripts/app/templates/*.hbs"
        ));
}