Szél Péter

Amikor először elkezdtem foglalkozni az Ember.js-el, minden zavarosnak tűnt. Látszólag – MVC keretrendszer lévén – ismerős fogalmakat használ, mégis érthetetlen volt számomra az útmutató leírás a honlapon. Néhány hétnek el kellett telnie, mire megértettem a logikáját.

Miután viszont megértettem, hogy a 'Controller', 'View' vagy 'Route' egészen mást jelent itt, hirtelen minden tiszta és egyszerű lett. A trükk az, hogy bár számos ismerősen hangzó fogalmat használ az Ember.js, máshogy kell őket értelmezni, mint az ASP.NET MVC-ben.

Template vs. View

Az Ember.js Template az, ami ASP.NET MVC-ben a View.

Lényegében HTML, kiegészítve valamilyen sablonozó nyelvvel. Ember.js esetén ez a Handlebars, amely kapcsos-zárójelekre alapozva egészíti ki a HTML-t. Például ha a Person nevű változó name tulajdonságát szeretnéd kiíratni, akkor a {{Person.name}} formációt kell használnod.

A nehézséget az okozza, hogy a View fogalma létezik Ember.js-ben is, de egészen mást jelent.

Akkor mi a View?

Itt nem HTML kódot fogunk találni, hanem JavaScriptet.

Akkor kell a View-t implementálnunk, ha valamilyen komplexebb alacsonyszintű eseménykezelést szeretnénk megvalósítani. A jó hír az, hogy erre viszonylag ritkán lesz szükség, hiszen az Ember.js gazdagon ellát bennünket előre legyártott Viewkkal (pl. textfield, checkbox, stb...), amelyeket érdemes felhasználnunk saját View implementálása helyett.

Controller

Az Ember.js Controller nem más, mint egy ViewModel. Oké, tudom, ez elég őrültnek hangzik. :)

A legfőbb feladata a kliens oldali állapot tárolása, ami különösen zavarbaejtő, hiszen így egészen szokatlan dolgok kerülnek a Controllerbe. Emellett feladat még bizonyos típusú események kezelése.

Kliens oldali állapot tárolására a Controller objektum egy-egy propertyjét használhatjuk. Például ha egy olyan alkalmazást készítünk, amelyben kliens oldali lapozást valósítunk meg, akkor az aktuális oldalszám tipikusan egy ilyen tárolandó állapot:

var PagedController = Ember.Controller.extend({  
    currentPageId: 0,

    jumpToPage: function( pageId ) {
        this.set('currentPageId', pageId)
    }
});

A Controller propertyjét pedig könnyedén elérem a template-ből:

<div>  
    Current page: {{currentPageId}}
</div>  

Route

Mindközül talán a Route objektum az, amely helyét .NET fejlesztőként a legnehezebben érzelmezzük.

ASP.NET-ben a Route egy egyszerű mapper, amely egy URL mintát párosít Controllerhez. Az Ember.js Route feladata ennél jóval tágabb, lényegében ő épít fel mindent a kliens oldalon, ami az adott URL-hez tartozik. Így feladata:

  • a Template és a hozzá tartozó Controller kiválasztása
  • A model lekérése és beállítása
  • a Controller inicializálása
  • magas szintű események kezelése

Események kezelése

Feltűnhetett, hogy három különböző helyen is lehet eseményeket kezelni, a Viewban, a Controllerben és a Route-ban is. Ez bizony nem kis őrültségnek tűnik, a következő bejegyzésemben külön foglalkozom ezzel a témával, ha érdekel, kövesd a blogomat! :)