Object Model

Classes and Instances

Class

App.Person = Ember.Object.extend({
  say: function(thing) {
    var name = this.get('name');
    alert(name + " says: " + thing);
  }
});

Instance

var person = App.Person.create();
person.say("Hello"); // alerts " says: Hello"

Computed Properties

App.Person = Ember.Object.extend({
  // these will be supplied by `create`
  firstName: null,
  lastName: null,

  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

var ironMan = App.Person.create({
  firstName: "Tony",
  lastName:  "Stark"
});

ironMan.get('fullName'); // "Tony Stark"

Observers

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'),

  fullNameChanged: function() {
    // deal with the change
  }.observes('fullName').on('init')
});

var person = Person.create({
  firstName: 'Yehuda',
  lastName: 'Katz'
});

person.set('firstName', 'Brohuda'); // observer will fire

Bindings

Run Loop

Templating

Handlebars

  
    <script type="text/x-handlebars">
      Hello, <strong>{{firstName}} {{lastName}}</strong>!
    </script>
  

						

Application Template

	<script type="text/x-handlebars">
	  <div>
	    {{outlet}}
	  </div>
	</script>
						

Routeing

The Router

App.Router.map(function() {
  this.route("about", { path: "/about" });
  this.route("favorites", { path: "/favs" });
});

Resourse and Dynamic Secments

App.Router.map(function() {
  this.resource('posts', { path: '/posts' }, function() {
    this.resource('post', { path: '/post/:post_id' });
  });
});

The Route Object

    App.PersonsRoute = Ember.Route.extend({
        model: function() {
            return App.persons.getPersons();
        },
        setupController: function(controller, model) {
            controller.set('model', model);
        },
        beforeModel: function(transition) {
            if (!App.Persons) {
              return Ember.$.getScript('/models/persons.js');
            }
          }
        afterModel: function(posts, transition) {
            if (persons.get('length') === 1) {
              this.transitionTo('persons.show', persons.get('firstObject'));
            }
          }
    });

Controllers

Ember Contollers

• There are three types of controllers
• Defined by Model, Object vs Array
• Act as a cache to the Model Data
• Hold display logic

Ember.Controller

Most simple controller, when there is no model.

Ember.ObjectController

Used when model is an object

Ember.ArrayController

Used when model is an Array (enumerable)

Views

Ember Helpers

Custom Views

Setup and Teardown

Models