The document discusses Ember.js, a JavaScript MVC framework introduced in 2011, highlighting its features such as auto-updating templates, data bindings, and computed properties. The presentation includes demonstrations of subclassing and data binding within the framework. It serves as an introduction for developers interested in utilizing Ember.js for web application development.

1. Starting out with
Ember.js
24 November, 2012
BangaloreJS Meetup

2. whoami?
Anirudh Shivanand
@theobile
JS noob
iOS developer
Siebel faker

3. about ember.js
Been around since 2011
Came out of SproutCore -> Amber -> Ember
It's a JavaScript MVC framework
Eliminates boilerplate code and provides architecture
auto updating templates
data bindings
computed properties
routers - state managers

4. Dependencies
jQuery
Handlebars.js - Template language

5. Init | app.js
Ap=EbrApiaincet(
p me.plcto.rae{
ato:'nrd'
uhr Aiuh
};
)
ApApiainotolr=EbrCnrle.xed)
p.plctoCnrle me.otolretn(;
ApApiainiw=EbrVe.xed{
p.plctoVe me.iwetn(
tmltNm:'plcto'
epaeae apiain
};
)
Apiiilz(;
p.ntaie)

6. Source HTML
<dcyehm>
!otp tl
<ed
ha>
<citsc"slbjur-..-i.s>/cit
srp r=j/i/qey172mnj"<srp>
<citsc"slbhnlbr-...ea6j"<srp>
srp r=j/i/adeas100bt..s>/cit
<citsc"slbebr100pe2mnj"<srp>
srp r=j/i/me-..-r..i.s>/cit
<ha>
/ed
<oy
bd>
<cittp=tx/-adeas dt-epaenm=api
srp ye"etxhnlbr" aatmlt-ae"pl
cto"
ain>
<3Wount!/3
h>hdni?<h>
{Apato}
{p.uhr}
<srp>
/cit
<citsc"sapj"<srp>
srp r=j/p.s>/cit
<bd>
/oy
<hm>
/tl

7. Voila!
Wount!
hdni?
Aiuh
nrd

8. Demo

9. Computed Property
ApUe =EbrOjc.xed{
p.sr me.betetn(
frt nl,
is: ul
ls:nl,
at ul
fl:fnto({
ul ucin)
rtr ti.e(frt)""ti.e(ls';
eun hsgt'is'+ +hsgt'at)
}poet(frt,ls'
.rpry'is''at)
};
)

10. Subclassing | Data Binding
Apcret=ApUe.rae{
p.urn p.srcet(
frt 'o'
is: Bb,
ls:'aly,
at Mre'
peettidn:'p.oain
rsnABnig Aplcto'
};
)

11. HTML
<cittp=tx/-adeas dt-epaenm=apiain>
srp ye"etxhnlbr" aatmlt-ae"plcto"
<i>aecetdb:{Apato}<dv<r
dvPg rae y {p.uhr}/i>b>
<i>{p.urn.ul}i {Apcretpeett}/i>b>
dv{Apcretfl} n {p.urn.rsnA}<dv<r
<utn{ato "eGe"tre=Apcret}>e Ge<bt
bto {cin bees agt"p.urn"}Be es/ut
o>
n
<utn{ato "oeM tre=Apcret}>oe M<bto
bto {cin bny" agt"p.urn"}Bny ?/ut
n>
<srp>
/cit

12. Demo

13. Thank you.