postimin time të parë tregova se si zgjodha Ember.js dhe veçorit e këtij framework-u. E në këtë postim do shfaq nga një shembull për secilën veçori.

Instalimi i Ember.js është shumë i thjesht, vizitoni ueb faqen dhe shkarkoni «starter-kit» dhe aty i keni te gjitha fil-et e duhura për të filluar.

Struktura fil-eve ne «starter-kit» është e këtij lloj:

css
    normalize.css
    style.css
js
    libs
        ember-1.0.0.js
        handlebars-1.0.0.js
        jquery-1.9.1.js
    app.js
index.html

Organizimin dhe strukturën e fil-ve mund ta bëni sipas dëshirës suaj por ne shembujt në vijim ne do përdorin strukturën më lart.

Unë do fshij përmbajtjen në tërësi tek js/app.js dhe gjithashtu do fshi pjesën që ka te bej me Handlebars.js në index.html, e në rastin tim index.html duket kështu:

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EmberJS më shembuj</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <script src="js/libs/jquery-1.9.1.js"></script>
    <script src="js/libs/handlebars-1.0.0.js"></script>
    <script src="js/libs/ember-1.0.0.js"></script>
    <script src="js/app.js"></script>

</body>
</html>

Se pari duhet te definojmë fillimin e aplikacionit në Ember.js këtë e bëjmë në këtë mënyrë:

js/app.js
var App = Ember.Application.create();

Dhe unë, si shumica e programueseve e emërojmë programin «App», gjithsesi ju mund ta emërtoni programin tuaj sipas dëshirës por keni vëmendje që emri duhet gjithmonë të filloj më një shkronje të madhe.

Handlebars.js


Përpos që duhet të definojmë programin ne duhet gjithashtu ti tregojmë programit se ku të shfaq logjiken e tij, këtë e bëjmë përmes librarisë Handlebars.js.

Kur definojmë një program Ember.js shikon (dhe kërkon) gjithmonë një template të pa emëruar (ose te emëruar më emrin «application»). Definimin e templates e bëjmë kështu:

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EmberJS më shembuj</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<script type="text/x-handlebars">
    Mirë se vini në ketë mësim në Ember.js
</script>

Kurse emërimin e bëjmë duke shtuar atributin «data-template-name» (ose ne disa vende mund ta shikoni duke shtuar vetëm atributin «id»), qe ne rastin tone do dukej kështu:

index.html
<!-- header ... -->
<script type="text/x-handlebars" data-template-name="application">
    Mirë se vini në ketë mësim në Ember.js
</script>

Data binding


Pa shtuar asgjë në app.js, tek index.html, në template «application», krijojmë një tekst boks ku ne mund ta shkruajmë emrin dhe ai emër të shfaqet gjithashtu më poshtë.

index.html


Handlebars.js veçohet për mundësin e krijimit të «helpers» për paraqitje të ndryshime dhe me kodin me lart shikoni përdorimin e një «helper» që quhet «input» që është pjesë e Ember.js.

Dhe siç e shini lidhshmëria mes vlerës së tekst boksit dhe shfaqja e asaj vlere është funksionale pa pasur nevojë për logjike shtesë.

Emërtimi (Naming convention)


Kur ne definojmë një program (i cili ne këtë rast është dhe një resource) Ember.js automatikisht gjeneron disa «routes» dhe «controllers», «views» për ne dhe ato janë:

ApplicationRoute
ApplicationIndexRoute
ApplicationController
ApplicationIndexController
ApplicationView
ApplicationIndexView
template: application
template: application/index

Në raste kur neve na nevojitet ndonjë logjike shtes ateher ne mundemi ti definojm vete këto instanca te programit, dhe kete do ta bejm ne vijim tek shembulli i «Observers».

Siç e shihni emërimi ndjek një standard që e bën më të lehtë dhe me te lexueshme kodin e programit.

Observers


Për ta demonstruar këtë veçori po e marrim një shembull që programi ynë ka dy atribute, emër dhe mbiemër, këto dy atribute do i vendosim në «ApplicationController», dhe ne duam të krijojmë një funksion që sa herë dikush ndryshon emrin një funksion te ekzekutohet. Ember.js e bën këtë duke ja bashkangjitur atij funksioni një «observers»-metodë.



Përpos metodës «oberves», Ember.js mundëson që një funksion ta kthesh në atribute duke shtuar metodën «property», e n.q.s. do ta observosh një atribute për ndryshime atëherë shton emrin atributit në fjalë brenda metodës «property». Siç e kam bere unë në funksionin «fullName» më lart tek JavaScript.

Kjo ishe e gjitha për tani, shpresoj qe t’ju ka pëlqyer, për çdo kritik apo sugjerim ju lutem me kontaktoni përmes twitter (@oxodesign).