Introduction to Ember.js

Transcript

1. Introduction to Ember.js Paulius Norkus AdDuplex
2. What is Ember.js • A framework for creating ambitious web applications • Based on MVC • Auto-Updating DOM • Conventions over configuration • Dependencies: • jQuery • Handelbars.js
3. Core Concepts • Classes and Instances • Computed Properties • Bindings • Observers • Templates
4. Classes and Instances App.Person = Ember.Object.extend({ say: function (thing) { var name = this.get("name"); alert(name + " says: " + thing); } }); App.Soldier = App.Person.extend({ say: function(thing){ this._super.say(thing + ", sir!"); } }); var soldier = App.Soldier.create({ name: "Ryan" }); soldier.say("Yes"); // alerts "Ryan says: Yes, sir!"
5. Computed Properties App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function (){ return this.get("firstName") + " " + this.get("lastName"); }.property("firstName", "lastName") }); var person = App.Person.create({ firstName: "Paulius", lastName: "Norkus" }); person.get("fullName"); // "Paulius Norkus"
6. Bindings App.wife = Ember.Object.create({ householdIncome: 80000 }); App.husband = Ember.Object.create({ houseboldIncomeBinding: "App.wife.householdIncome" }); App.husband.get("householdIncome"); // 80000 //Someone get raise. App.husband.set("householdIncome", 90000); App.wife.get("householdIncome"); // 90000
7. Observers App.Person = Ember.Object.extend({ firstName: null, lastName: null, fullName: function () { return this.get("firstName") + " " + this.get("lastName"); }.property("firstName", "lastName"), fullNameDidChange: function () { alert("Changed!"); }.observes("fullName") }); var person = App.Person.create({ firstName: "Paulius", lastName: "Norkus" }); person.set("firstName", "Jonas"); // alerts "Changed!"
8. Templates <script type="text/x-handlebars" id="posts"> <h1>{{categoryName}}</h1> <h2>Posts:</h2> <ul> {{#each post in posts}} <li>{{post.title}}</li> {{else}} <p>No posts yet.</p> {{/each}} </ul> </script> Uses Handelbars.js templates with Ember.js helpers
9. Demo
10. Who is using Ember.js?
11. Resources • http://www.emberjs.com • http://discuss.emberjs.com • http://emberwatch.com/ • http://github.com/discourse/discourse • IRC #emberjs
12. Thank You
13. We’re hiring! http://AdDuplex.com/Jobs