Ember Terms

Router

            
      App = Ember.Application.create();

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

Template

              
      
{{title}}

      {{body}}
             
            

Views

              
      App.PostView = Ember.View.extend({
        classNames: ['post-view']
      });
      // Could have omitted and Ember would have automagically created it.
             
            

Model

              
      App.Post = DS.Model.extend({
        title: DS.attr('string'),
        body: DS.attr('string')
      });
             
            

Controller

              
      App.PostController = Ember.ObjectController.extend({
        length: function() {
          return this.get('model.body.length');
        }.property('model.body')

        actions: {
          removePost: function() {
            var post = this.get('model');
            post.deleteRecord();
            post.save();
          }
        }
      });
      // If we never use length or removePost, we could drop this controller
             
            

Components

      
        {{blog-intro}} // good
        {{intro}} // bad
      

      
        // Template
        

        // Component
        

        // Output
        This is my introduction
      
            

Demo

Ember CLI

Ember command line utility that provides spin-up, testing, asset-compilation and more for Ember.

        npm install -g ember-cli
        ember new my-new-app
        cd my-new-app
        ember server
      

Ember Inspector

Ember Testing

Ember uses QUnit as it's default testing framework.

      ember test            # will run your test-suite in your current shell once
      ember test --server   # will run your tests on every file-change

      test("Page contents", function() {
        expect(2);
        visit('/foos').then(function() {
          equal(find('.foos-list').length, 1, "Page contains list of models");
          equal(find('.foos-list .foo-item').length, 5, "List contains expected number of models");
        });
      });