Java script+mvc+with+emberjs
Upcoming SlideShare
Loading in...5
×
 

Java script+mvc+with+emberjs

on

  • 2,829 views

 

Statistics

Views

Total Views
2,829
Views on SlideShare
2,327
Embed Views
502

Actions

Likes
3
Downloads
63
Comments
0

4 Embeds 502

http://44ux.com 464
http://www.44ux.com 36
http://cache.baidu.com 1
http://xianguo.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Java script+mvc+with+emberjs Java script+mvc+with+emberjs Presentation Transcript

  • 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 person = new Person();
  • VIEWWe call {{somebody}} as BIG HOLE !!!{{#if person}} Welcome back <b>{{name}}</b> !{{/if}}
  • CONTROLLER(function($, exports){ var mod = {}; mod.doSomething = function(){ // do something }; mod.load = function(){ this.view = $(“#view”); };})(jQuery, window);
  • 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
  • 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
  • CREATING A NAMESPACEwindow.App = Ember.Application.create();window.App = Ember.Application.create({ rootElement: #sidebar});// namespace & event handler
  • THE EMBER OBJECT MODELPerson = Ember.Object.extend({ say: function(thing) { alert(thing); }});var person = Person.create();person.say("Hello") // alerts "Hello"
  • 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"
  • 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 + "!"); }});
  • 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"
  • BINDINGSApp.president = Em.Object.create({ name: "Obama”});App.country = Em.Object.create({ presidentNameBinding: App.president.name});App.country.get(presidentName’); // “Obama"
  • 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.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/
  • THANK YOU !