Slide 1

Slide 1 text

Javascript MVC

Slide 2

Slide 2 text

Agenda

Slide 3

Slide 3 text

What is MVC ?

Slide 4

Slide 4 text

Why Javascript MVC ? ● ● ● ●

Slide 5

Slide 5 text

Why Javascript MVC ? ● ● ● ● ● ●

Slide 6

Slide 6 text

BROWSER = FUTURE (Everything is inside a browser) 2:30 PM

Slide 7

Slide 7 text

Why not Javascript MVC ? ● ● ● ●

Slide 8

Slide 8 text

All MVCs are not 100% MVC ● ● ●

Slide 9

Slide 9 text

MV* ● ● ●

Slide 10

Slide 10 text

Some (many) popular MV* libraries ● ● ● ● ● … ● ● ● ●

Slide 11

Slide 11 text

Intro to Backbone.js

Slide 12

Slide 12 text

Backbone Model var PersonModel = Backbone.Model.extend({ initialize:function(){ }, defaults:{ “name”:”PersonName” } }); var p = new PersonModel(); /*initialize()*/ p.set(“name”,”Bhavesh”); /*setter method*/ alert(p.get(“name”)); /*getter method*/ p.toJSON();

Slide 13

Slide 13 text

Backbone Model p.fetch(); p.save(); p.destroy(); p.isValid();

Slide 14

Slide 14 text

Backbone Collections var PersonsCollection = Backbone.Collection.extend({ model:Person }); var pc = new PersonsCollection(); push, pop, shift, length, sort, where, fetch

Slide 15

Slide 15 text

Backbone Router var myRouter = Backbone.Router.extend({ routes:{ “” : “home”, “search/:query” : ”search”, “search/:query/p:personId” : ”search” }, home:function(){ … }, search:function(query,personId){ … } });

Slide 16

Slide 16 text

Backbone View var sidebarItems = Backbone.View.extend({ tagName: “li”, className:”item”, events:function(){ “click .icon” : “open”, “click .button.edit” : “openEditDialog” “click .button.delete” : “destroy” }, render:function(){ $(this.el).html(“Hello World!s”); return this; } });

Slide 17

Slide 17 text

Demo Application

Slide 18

Slide 18 text

Which JS-MVC to use ? Factors ● ● ● ● ●

Slide 19

Slide 19 text

When YES to Javascript MVC ? ● ● ● ● ●

Slide 20

Slide 20 text

When NO to Javascript MVC ? ● ● ● ●

Slide 21

Slide 21 text

References

Slide 22

Slide 22 text

Thanks. Questions ? <%= Happy_Coding %>