Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javasccript MV* frameworks

1,607 views

Published on

FE Suffolk talk, 27 August 2012

Published in: Technology, Business
  • DOWNLOAD FULL. BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Javasccript MV* frameworks

  1. 1. Javascript MV* frameworks Kerry Buckley, FE Suffolk 27/8/12
  2. 2. MV*
  3. 3. Features
  4. 4. Client-server modelsynchronisation
  5. 5. Eventhandling
  6. 6. View templates
  7. 7. URLrouting
  8. 8. UI elementbinding
  9. 9. che ibili ||b,n. nlineB HTML=" lay="" h="0" emoveC null;r place ild. {vis i t r ,n=m m=1,k. a.inner le.disp yle.wid ="",n. =j=a=i m()).r ;ret = e = ) "),p hild(a e.zoo = 2), 0].sty ),j.st erHTML =g=h=m h.rando pando] f(( p endC a.styl Width!= =0,q[ "div" o .inn ]=u;o=l ry+Mat :a[f.e pando; [l x i li ne", offset ight== ement( )===0), bles" jque pando]] ]&&f.ex on")e?k ?i =a. fsetHe eateEl 0)||0 +"Bub +(f.fn. .ex ocks ].of r , 1 [ t " [ f p ando "functi eturn h c 0 q[ e&&(j =c.c nRight on"),k "jQuery cache[a :a[f.ex c== ts;r urn;if( hu= yl argi "functi pando: ype?f. pando] |typeo g].eve )ret f n Show me e dSt :0}).m ]== x T x | [ ] h [i]: h t [ s d :0,e =a.node j?a[f.e object" i[g]&&i if(!h[i elete ):b[ nRig ypeof a {},uui a){a a ,l= f c==" eturn pando; |h!=a?d expando ret), u=t cache: ction( cache: ypeo c])r o]:f.ex xpando| bute(f. )];if(b is[ ) nd({ ata:fun ,k=j?f. ));if(t s"&&!i[ pand hxte asD e p t x l eteE veAttri erCase( data(t ,d[ ,h nodeTyp N=f.noo =="even g?b[f.e port.de remo 0} a. . oLow h){d=f is[0],g hi = JSO ;if(c= e:b,i= ;f.sup bute?b. eName.t engt, i,j [l].to =d) h ] i d . l , k(th =b){d=t ? (k e(c)] g?f.cac =h[i][e oveAttr ta[a.no f(this ng(5)) (c== || as j[1] j C ,h= }var k :b.rem f.noDa ed"){i substri :"";if d===b&& eDatc amel odeType turn n do] var b= ndefin ase(g. ."+j[1] eturn hang c,b =b.n [i]))re [f.expa ame){ r("c a(a, the code! "u a== .came =j lC [1]?" ;r e g h b N f a ,d)) rHandl f.dat ),m(c (!l( delete (a.node (typeo &&(g=f );j[1] is[0], igge ( 0f ? f i f 0 " t h t r a,c, a(c,e,! (d)); ando on(a){i =null; a-")=== plit(". ),d=k( ,c),b. f.data( eDat push d.ca d a a ,u ncti ){var Of("dat r j=a.s is[0], a(this, "mark" f.remov ,!0):e. s"), a,c index });va ata(th f.dat "fx")+ !0):( ay(d) rogres );if(c=on( ,g. , r e s,a) (d=f.d "!",d), c=(c|| (c,e,g makeAr t("inp a="fx" turn.nam ata(thi th&& ( a . f [1]+ c){a&& ?f.dat (a,c,f c.unshi "&&(c=a n(a){r ){f.d , e g {f.d is.len Data"+j n(a, - 1;g f.data fx"&& tring unctio ction( a|| b &&th r("set functio !0)||1) d)?e= b ===" f a!="s queue:f ut(fun a=b),a= [g] Ha ndle _mark: c,e,b, Array( )),d&&( typeo o },de etTime &&(c=a, .data(e (? ) nd({ f.data( e||f.is shift( (a,c){ is,a)} is;s xte 0:( ing" !0))&&f i,s=/^a :f . n h h r ? &&(! &&(d=c unctio ueue(t var c=t a!="st k,b, / r,g=a b,!0);d ess" f q { , ea)$ nd({att th r eue: "&&f.de tion() }typeof ta(e[g] |textar xte ,a,c inprog nd({qu ess c ) a t . e c ess( va =" .exte progr b ,fun (e,[e] )||f.d |selec w;f.fn n f.ac (a){d== .fn eue( With b,!0 "i n qu ject /,v, etur tion (o
  10. 10. Modelswindow.Todo = Backbone.Model.extend({ idAttribute: "_id", defaults: function() { return { done: false, order: Todos.nextOrder() }; }, toggle: function() { this.save({done: !this.get("done")}); }});
  11. 11. Collectionswindow.TodoList = Backbone.Collection.extend({ model: Todo, url: /api/todos, done: function() { return this.filter(function(todo){ return todo.get(done); }); }, remaining: function() { return this.without.apply(this, this.done()); }});
  12. 12. Client-server syncget /api/:thing do DB.collection(params[:thing]).find.to_a.map{|t| from_bson_id(t)}.to_jsonendget /api/:thing/:id do from_bson_id(DB.collection(params[:thing]).find_one(to_bson_id(params[:id]))).to_jsonendpost /api/:thing do oid = DB.collection(params[:thing]).insert(JSON.parse(request.body.read.to_s)) "{"_id": "#{oid.to_s}"}"enddelete /api/:thing/:id do DB.collection(params[:thing]).remove(_id => to_bson_id(params[:id]))endput /api/:thing/:id do DB.collection(params[:thing]).update({_id => to_bson_id(params[:id])}, {$set => JSON.parse(request.body.read.to_s).reject{|k,v| k == _id}})enddef to_bson_id(id) BSON::ObjectId.from_string(id) enddef from_bson_id(obj) obj.merge({_id => obj[_id].to_s}) end
  13. 13. Views & eventswindow.TodoView = Backbone.View.extend({ tagName: "li", template: _.template($(#item-template).html()), events: { "click .check" : "toggleDone", "dblclick div.todo-text" : "edit", "click span.todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" }, initialize: function() { this.model.bind(change, this.render, this); this.model.bind(destroy, this.remove, this); }, render: function() { $(this.el).html(this.template(this.model.toJSON())); this.setText(); return this; }, toggleDone: function() { this.model.toggle(); }, edit: function() { $(this.el).addClass("editing"); this.input.focus(); }, // ...});
  14. 14. View templates<script id="item-template" type="text/template"> <div class="todo <%= done ? done : %>"> <div class="display"> <input class="check" type="checkbox" <%= done ? checked="checked" : %> /> <div class="todo-text"></div> <span id="todo-destroy"></span> </div> <div class="edit"> <input class="todo-input" type="text" value="" /> </div> </div></script>
  15. 15. URL routingvar Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... }});
  16. 16. UI element binding
  17. 17. UI element binding<form action="#"> New item: <input /> <button type="submit">Add</button> <p>Your items:</p> <select multiple="multiple"> </select></form>
  18. 18. UI element binding<form action="#" data-bind="submit: addItem"> New item: <input data-bind=value: itemToAdd, valueUpdate: "afterkeydown" /> <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> <p>Your items:</p> <select multiple="multiple" data-bind="options: items"> </select></form>
  19. 19. UI element bindingvar SimpleListModel = function(items) { this.items = ko.observableArray(items); this.itemToAdd = ko.observable(""); this.addItem = function() { if (this.itemToAdd() !== "") { this.items.push(this.itemToAdd()); this.itemToAdd(""); } }.bind(this);};ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));
  20. 20. Anyquestions
  21. 21. Image credits• http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx• http://www.flickr.com/photos/anhonorablegerman/6133053209• http://www.flickr.com/photos/ksayer/5614813544• http://www.flickr.com/photos/camafghanistancam/4905314342• http://www.flickr.com/photos/duncan/4222224278• http://www.flickr.com/photos/scissorhands33/3430164569• http://www.flickr.com/photos/patlet/53104695• http://www.flickr.com/photos/omcoc/6751047205

×