Modello EmberJS

di Xi qiu

Il modello MVC di EmberJS è scritto da Nathan Totten, Thiago Santos e Xi factor 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 della pagina iniziale, l'applicazione a pagina singola comunica con il server tramite le richieste AJAX.

AJAX non è una novità, ma oggi sono disponibili framework JavaScript che semplificano la compilazione e la gestione di un'applicazione SPA 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. Al contrario, si inserisce 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 API Web ASP.NET 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 un nome al progetto 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 senza problemi.

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

• Un modello, scritto nel linguaggio di creazione modelli handlebars, descrive l'interfaccia utente dell'applicazione. In modalità di rilascio, il compilatore Handlebars viene usato per aggregare e compilare il modello di handlebars.
• Un modello archivia i dati dell'applicazione che ottiene dal server (elenchi ToDo e 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 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 Ember per l'uso con API Web ASP.NET.
• Script/helpers.js: definisce i nuovi helper della barra dei gestori 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 handlebars.

Verranno ora esaminati alcuni di questi script in modo più dettagliato.

Modelli

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 attività. Sono disponibili 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 osservatore, che vengono richiamate quando viene modificata una proprietà osservata:

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

Visualizzazioni

Le visualizzazioni vengono definite nella cartella Scripts/app/views. Una visualizzazione converte 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 la aggiunge alla matrice. Per vedere come viene chiamata questa funzione, 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>

Route

Router.js definisce le route e il modello predefinito da visualizzare, imposta 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 le corrispondenze con URL, nomi di route, controller e modelli. 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: modello per la route "/about".
• index.hbs: 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 oggetto "{{outlet}}" in cui inserire altri modelli a seconda della route. 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")
}

Chiamato senza argomenti, la funzione esegue il rendering di tutti i file 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"
        ));
}