Java script+mvc+with+emberjs

  • 2,286 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,286
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
63
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. JAVASCRIPT MVC WITH EMBER.JS @LASERJI 2012-06-12
  • 2. WHAT IS MVC ?Model + View + Controller
  • 3. MODELvar Person = { name: “”, say: function(thing){ alert(“fuck this “ + thing + “!”); }};var person = new Person();
  • 4. VIEWWe 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 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. CREATING A NAMESPACEwindow.App = Ember.Application.create();window.App = Ember.Application.create({ rootElement: #sidebar});// namespace & event handler
  • 9. THE EMBER OBJECT MODELPerson = Ember.Object.extend({ say: function(thing) { alert(thing); }});var person = Person.create();person.say("Hello") // alerts "Hello"
  • 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. 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. 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. BINDINGSApp.president = Em.Object.create({ name: "Obama”});App.country = Em.Object.create({ presidentNameBinding: App.president.name});App.country.get(presidentName’); // “Obama"
  • 14. EVENT HANDELERApp.ListingView = Ember.View.extend({ templateName: edit, edit: function(event) { alert(Edited) }});
  • 15. EVENT HANDELERApp.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 !