JAVASCRIPT MVC WITH      EMBER.JS    @LASERJI 2012-06-12
WHAT IS MVC ?Model + View + Controller
MODELvar Person = {     name: “”,     say: function(thing){            alert(“fuck this “ + thing + “!”);     }};var perso...
VIEWWe call {{somebody}} as BIG HOLE !!!{{#if person}}        Welcome back <b>{{name}}</b> !{{/if}}
CONTROLLER(function($, exports){      var mod = {};      mod.doSomething = function(){            // do something      }; ...
JAVASCRIPT MVC LIBRARIES•   Backbone.js•   Ember.js (SproutCore 2.0)•   Spine.js•   JavaScriptMVC•   Sammy.js•   YUILibrar...
EMBER.JS• Ember is a JavaScript framework for creating  ambitious web applications that eliminates  boilerplate and provid...
CREATING A NAMESPACEwindow.App = Ember.Application.create();window.App = Ember.Application.create({    rootElement: #sideb...
THE EMBER OBJECT MODELPerson = Ember.Object.extend({  say: function(thing) {    alert(thing); }});var person = Person.crea...
THE EMBER OBJECT MODEL// Passing in an objectvar tom = Person.create({  name: "Tom Dale",  helloWorld: function() {    thi...
THE EMBER OBJECT MODEL// Reopening Classes and InstancesPerson.reopen({  isPerson: true});Person.create().get(isPerson) //...
COMPUTED PROPERTIESPerson = Ember.Object.extend({  // these will be supplied by `create`  firstName: null,  lastName: null...
BINDINGSApp.president = Em.Object.create({    name: "Obama”});App.country = Em.Object.create({    presidentNameBinding: Ap...
EVENT HANDELERApp.ListingView = Ember.View.extend({    templateName: edit,    edit: function(event) {      alert(Edited)  ...
EVENT HANDELERApp.ClickableView = Ember.View.extend({    click: function(evt) {       alert("ClickableView was clicked!");...
OTHER RESOURCES• http://www.adobe.com/devnet/html5/articles/flam  e-on-a-beginners-guide-to-emberjs.html• http://emberjs.c...
THANK YOU !
Upcoming SlideShare
Loading in...5
×

Java script+mvc+with+emberjs

2,403

Published on

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,403
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
65
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Java script+mvc+with+emberjs

  1. 1. JAVASCRIPT MVC WITH EMBER.JS @LASERJI 2012-06-12
  2. 2. WHAT IS MVC ?Model + View + Controller
  3. 3. MODELvar Person = { name: “”, say: function(thing){ alert(“fuck this “ + thing + “!”); }};var person = new Person();
  4. 4. VIEWWe call {{somebody}} as BIG HOLE !!!{{#if person}} Welcome back <b>{{name}}</b> !{{/if}}
  5. 5. CONTROLLER(function($, exports){ var mod = {}; mod.doSomething = function(){ // do something }; mod.load = function(){ this.view = $(“#view”); };})(jQuery, window);
  6. 6. JAVASCRIPT MVC LIBRARIES• Backbone.js• Ember.js (SproutCore 2.0)• Spine.js• JavaScriptMVC• Sammy.js• YUILibrary• KnockoutJS• Angular.js• Fidel.js• ExtJS• http://www.infoq.com/cn/news/2012/05/js-mvc- framework
  7. 7. EMBER.JS• Ember is a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture.• Formerly known as AmberJS – formerly known as SprouteCore 2• Emberjs.com• Ember.js VS. Backbone.js
  8. 8. CREATING A NAMESPACEwindow.App = Ember.Application.create();window.App = Ember.Application.create({ rootElement: #sidebar});// namespace & event handler
  9. 9. THE EMBER OBJECT MODELPerson = Ember.Object.extend({ say: function(thing) { alert(thing); }});var person = Person.create();person.say("Hello") // alerts "Hello"
  10. 10. THE EMBER OBJECT MODEL// Passing in an objectvar tom = Person.create({ name: "Tom Dale", helloWorld: function() { this.say("Hi my name is " + this.get(name)); }});tom.helloWorld() // alerts "Hi my name is Tom Dale"
  11. 11. THE EMBER OBJECT MODEL// Reopening Classes and InstancesPerson.reopen({ isPerson: true});Person.create().get(isPerson) // truePerson.reopen({ // override `say` to add an ! at the end say: function(thing) { this._super(thing + "!"); }});
  12. 12. COMPUTED PROPERTIESPerson = Ember.Object.extend({ // these will be supplied by `create` firstName: null, lastName: null, fullName: function() { var firstName = this.get(firstName); var lastName = this.get(lastName); return firstName + + lastName; }.property(firstName, lastName)});var tom = Person.create({ firstName: "Tom", lastName: "Dale"});tom.get(fullName) // "Tom Dale"
  13. 13. BINDINGSApp.president = Em.Object.create({ name: "Obama”});App.country = Em.Object.create({ presidentNameBinding: App.president.name});App.country.get(presidentName’); // “Obama"
  14. 14. EVENT HANDELERApp.ListingView = Ember.View.extend({ templateName: edit, edit: function(event) { alert(Edited) }});
  15. 15. EVENT HANDELERApp.ClickableView = Ember.View.extend({ click: function(evt) { alert("ClickableView was clicked!"); }});
  16. 16. OTHER RESOURCES• http://www.adobe.com/devnet/html5/articles/flam e-on-a-beginners-guide-to-emberjs.html• http://emberjs.com/documentation/• http://www.andymatthews.net/read/2012/03/07/G etting-Started-With-EmberJS• http://ngauthier.com/2012/02/playing-with- ember.html• http://emberjs.tumblr.com/
  17. 17. THANK YOU !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×