Introduction to Ember.js Paulius Norkus AdDuplex 

What is Ember.js • A framework for creating ambitious web applications • Based on MVC • Auto-Updating DOM • Conventions over configuration • Dependencies: • jQuery • Handelbars.js 

Core Concepts • Classes and Instances • Computed Properties • Bindings • Observers • Templates 

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!" 

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" 

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 

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!" 

Templates <h1>{{categoryName}}</h1> <h2>Posts:</h2> <ul> {{#each post in posts}} <li>{{post.title}}</li> {{else}} <p>No posts yet.</p> {{/each}} </ul> Uses Handelbars.js templates with Ember.js helpers 

Demo 

Who is using Ember.js? 

Resources • http://www.emberjs.com • http://discuss.emberjs.com • http://emberwatch.com/ • http://github.com/discourse/discourse • IRC #emberjs 

Thank You 

We’re hiring! http://AdDuplex.com/Jobs