Leo i s t i mej
i p lgy e n b .
v ln sm E rs
@YoranBrondsema
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
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 stay...
H d smeh p
o o Eb e?
w e rl
Add models to the store and templates update
themselves
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
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
Ap...
Setup this pollster in the route
ApPsRue=EbrRueetn(
p.otot
me.ot.xed{
stpotolr fnto(otolr mdl {
euCnrle: ucincnrle, oe)
i ...
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:...
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
Fil...
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}/...
Our controller for the template
ApPsCnrle =EbrOjcCnrle.xed{
p.ototolr
me.betotolretn(
cmet:fnto( {
omns ucin)
vrpsI =ti.e(...
Q so ?
u tn
eis
Based on yoranbrondsema.com/live-polling-system-ember-js
@YoranBrondsema
yoran@hstry.org
Upcoming SlideShare
Loading in …5
×

A Live Polling System in Ember.js

1,144 views

Published on

"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/)

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,144
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A Live Polling System in Ember.js

  1. 1. Leo i s t i mej i p lgy e n b . v ln sm E rs @YoranBrondsema
  2. 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. 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. 4. H d smeh p o o Eb e? w e rl Add models to the store and templates update themselves
  5. 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. 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. 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. 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. 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. 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. 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. 12. Q so ? u tn eis Based on yoranbrondsema.com/live-polling-system-ember-js @YoranBrondsema yoran@hstry.org

×