Java script+mvc+with+emberjs

Java script+mvc+with+emberjs

• 1.
  JAVASCRIPT MVC WITH EMBER.JS @LASERJI 2012-06-12
• 2.
  WHAT IS MVC? Model + View + Controller
• 3.
  MODEL var Person ={ name: “”, say: function(thing){ alert(“fuck this “ + thing + “!”); } }; var person = new Person();
• 4.
  VIEW We call {{somebody}}as BIG HOLE !!! {{#if person}} Welcome back <b>{{name}}</b> ! {{/if}}
• 5.
  CONTROLLER (function($, exports){ var mod = {}; mod.doSomething = function(){ // do something }; mod.load = function(){ this.view = $(“#view”); }; })(jQuery, window);
• 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.
  EMBER.JS • Ember isa 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.
  CREATING A NAMESPACE window.App= Ember.Application.create(); window.App = Ember.Application.create({ rootElement: '#sidebar' }); // namespace & event handler
• 9.
  THE EMBER OBJECTMODEL Person = Ember.Object.extend({ say: function(thing) { alert(thing); } }); var person = Person.create(); person.say("Hello") // alerts "Hello"
• 10.
  THE EMBER OBJECTMODEL // Passing in an object var 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.
  THE EMBER OBJECTMODEL // Reopening Classes and Instances Person.reopen({ isPerson: true }); Person.create().get('isPerson') // true Person.reopen({ // override `say` to add an ! at the end say: function(thing) { this._super(thing + "!"); } });
• 12.
  COMPUTED PROPERTIES Person =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.
  BINDINGS App.president = Em.Object.create({ name: "Obama” }); App.country = Em.Object.create({ presidentNameBinding: 'App.president.name' }); App.country.get('presidentName’); // “Obama"
• 14.
  EVENT HANDELER App.ListingView =Ember.View.extend({ templateName: 'edit', edit: function(event) { alert('Edited') } });
• 15.
  EVENT HANDELER App.ClickableView =Ember.View.extend({ click: function(evt) { alert("ClickableView was clicked!"); } });
• 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.
  THANK YOU ！