Ember Terms

Router

            
      App = Ember.Application.create();

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

• Queries the model and makes it available to controller/templates
• Defines that URL

Template

{{title}}

• File that displays content to user (HTML/Handlebars)
• Where you put almost all the presentation code
• There will be no logic in here

Views

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

• Won't be putting much logic in here.
• Additionall CSS classes that are relevant
• Should be thin and devoid of logic

Model

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

• Define model
• Use Ember Data as your ORM to interact with persitant state of model

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
             
            

• Controllers are more like decorators in Ember
• You will have properties that don't need to be persisted.

Components

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

      
        // Template
        

        // Component
        

        // Output
        This is my introduction
      
            

Demo

• gco start => Start: 1-way binding
• gco fixtures => Fixtures: Static data
• gco htmlbars => Htmlbars: Cleaner markup
• gco local-storage => Local Storage
• gco delete-posts => Delete

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");
        });
      });