"A Live Polling System in Ember.js" presented at the Boston Ember.js meetup on the 13th of February 2014 (http://www.meetup.com/Boston-Ember-js/events/159835752/)

1. Leo i s t i mej
i p lgy e n b .
v ln sm E rs
@YoranBrondsema

2. A uY a
b to n
o r
Moved to Boston 5 days ago
CTO of Hstry (hiring btw!)
Organizer of Brussels Ember.js meetups

3. Leo i s t
i p lgy e
v ln sm
For periodic updates in a single-page app
No real-time updates
Used in Hstry because user stays for long time on
same Route

4. H d smeh p
o o Eb e?
w e rl
Add models to the store and templates update
themselves

5. E ml
xp
a e
We have P s 's and C m e t
ot
o m n 's
We want to periodically update the new comments
to a post

6. S w ehc e
h mt o
o
ed
Pollster object
Responsible for setting an interval that periodically
calls an o P l function
nol
ApPlse =EbrOjc.xed{
p.oltr
me.betetn(
sat fnto( {
tr: ucin)
/ PL_NEVLi frisac 3 scns
/ OLITRA s o ntne 0 eod
ti.ie =stnevlti.nolbn(hs,PL_NEVL;
hstmr
eItra(hsoPl.idti) OLITRA)
}
,
so:fnto( {
tp ucin)
cernevlti.ie)
laItra(hstmr;
}
,
oPl:fnto( {
nol ucin)
/ IseJO rqetadaddt t tesoe
/ su SN eus n d aa o h tr
}
};
)

7. Setup this pollster in the route
ApPsRue=EbrRueetn(
p.otot
me.ot.xed{
stpotolr fnto(otolr mdl {
euCnrle: ucincnrle, oe)
i (me.soeti.e(plse') {
f EbriNn(hsgt'oltr))
ti.e(plse' ApPltrcet(
hsst'oltr, p.ose.rae{
oPl:fnto( {
nol ucin)
/ Dfndo tenx sie
/ eie n h et ld
}
})
);
}
ti.e(plse'.tr(;
hsgt'oltr)sat)
}
,
/ Ti i cle uo eiigteRue
/ hs s ald pn xtn h ot
datvt:fnto( {
eciae ucin)
ti.e(plse'.tp)
hsgt'oltr)so(;
}
};
)

8. The o P l function
nol
/ Ti cd i eeue i te'euCnrle'ho o teRue
/ hs oe s xctd n h stpotolr ok f h ot
vrrue=ti;
a ot
hs
oPl:fnto( {
nol ucin)
/ AA rqet
/ JX eus
Ebr$gtSN'udts,'E'.hnfnto(snoj {
me..eJO(/pae' GT)te(ucinjo_b)
/ TeJO srcuei a flos
/ h SN tutr s s olw:
/ {
/
/
/ cmet:[
omns
/
/
{..}
. ,
/
/
{..}
. ,
/
/ ]
/ }
/
}
/ Ieaetruhtecmet (OE `me.oEc`cosbosrcmail?
/ trt hog h omns NT: Ebrfrah rs-rwe optbe)
Ebr$ec(snojcmet,fnto(ne,cmet {
me..ahjo_b.omns ucinidx omn)
/ Mk sr ta tecmeti ntarayi tesoe
/ ae ue ht h omn s o led n h tr
i ( ruegt'tr'.eodsoddApCmet cmeti) {
f ! ot.e(soe)rcrILae(p.omn, omn.d)
ruegt'tr'.uh'omn' cmet;
ot.e(soe)ps(cmet, omn)
}
};
)
};
)

9. Now we have added the data to the store
But the view is not necessarily updated
Need to use the f l e API function
itr
Filters, on the other hand, perform a live search of all of the
records in the store’s cache.
Takes a type and filter function, and returns a live RecordArray
that remains up to date as new records are loaded into the
store or created locally.

10. Our template
<ril cas"ot>
atce ls=ps"
<2{tte}/2
h>{il}<h>
<>{otn}<p
p{cnet}/>
<sd>{edr"omns cmet}<aie
aie{rne cmet" omns}/sd>
<atce
/ril>

11. Our controller for the template
ApPsCnrle =EbrOjcCnrle.xed{
p.ototolr
me.betotolretn(
cmet:fnto( {
omns ucin)
vrpsI =ti.e(i';
a otd
hsgt'd)
/ Gtaltecmet ta bln t ti ps
/ e l h omns ht eog o hs ot
rtr ti.e(soe)fle(cmet,fnto(omn){
eun hsgt'tr'.itr'omn' ucincmet
rtr cmetgt'oti' = psI;
eun omn.e(ps.d) = otd
};
)
}poet(
.rpry)
};
)
Each C m e tadded to the Store is automatically
omn
shown

12. Q so ?
u tn
eis
Based on yoranbrondsema.com/live-polling-system-ember-js
@YoranBrondsema
yoran@hstry.org