OBJECT

• Classes & Instances
  • Simple way to create one => Ember.Object.create({});
• Computed Properties
  • fullName: function() { return this.get('firstName') + ' ' + this.get('lastName'); }.property('firstName', 'lastName')
  • Build a new property by synthesizing other properties.
• Observers
  • Are synchronous Ember.run.once(this, 'processFullName');
  • Should contain behavior that reacts to changes in another property.
• Binding
  
  • one-way/ two-way
  • Ensure objects in two different layers are always in sync.

APPLICATION

• Main
  
  • The first step to creating an Ember.js application: window.App = Ember.Application.create();

TEMPLATES

• Template
  • Important key {{outlet}}
• Handlebars
  • Templating library <script type="text/x-handlebars">
  • data-template-name (Reusable control o portion of code) <script type="text/x-handlebars" data-template-name="say-hello">
  • Each template has an associated controller: this is where the template finds the properties that it displays.
• Conditionals
  • {{#if}} {{else}} {{/if}}
  • {{#unless}}
• List
  • {{#each}} {{/each}} {{#each}} {{else}} {{/each}}
• Binding Attribute
  • {{bind-attr src=logoUrl}}
  • <input type="checkbox" {{bind-attr disabled=isAdministrator}}>
  • By default, view helpers do not accept data attributes. one way would be to add an attribute binding on the view.
  • You can also automatically bind data attributes on the base view with the following:
    Ember.View.reopen({ init: function() { this._super(); var self = this; // bind attributes beginning with 'data-' Em.keys(this).forEach(function(key) { if (key.substr(0, 5) === 'data-') { self.get('attributeBindings').pushObject(key); } }); } });
  • <div {{bind-attr class="priority"}}> (Ember.js dasherizing the property name)
  • <div {{bind-attr class="isUrgent:urgent"}}>
  • <div {{bind-attr class="isEnabled::disabled"}}>
  • <div {{bind-attr class="isUrgent priority"}}> (Multiple Classes)
• Link
  • The {{link-to}} helper.
• Action
  • The {{action}} Helper.
  • A way to let users interact with controls.
  • App.PostController = Ember.ObjectController.extend({ // initial value isExpanded: false, actions: { expand: function() { this.set('isExpanded', true); }, contract: function() { this.set('isExpanded', false); } } });
  • If the controller does not implement a method with the same name as the action in its actions object.
  • <button {{action "select" post on="mouseUp"}}>✓</button> (You can specify an alternative event by using the on option.)
  • Whitelisted allowedKeys <div {{action 'anActionName' allowedKeys="alt"}}>
  • Stopping event Propagation bubbles=false <button {{action 'close' bubbles=false}}>✗</button>
  • Specifying target <button {{action "select" post target=view}}>✓</button>
• Input Helper
  • {{input value="http://www.facebook.com"}}
  • {{input type="checkbox" name="isAdmin" checked=isAdmin}}
  • {{textarea value=name cols="80" rows="6"}}
• Development Helper
  • {{log}}
  • {{debugger}}
  • templateContext/ typeOfTemplateContext
• Rendering Helper
  • {{partial}} `<script type="text/x-handlebars" data-template-name='_author'> Written by {{author.firstName}} {{author.lastName}} </script> <script type="text/x-handlebars" data-template-name='post'>

    {{title}}

    {{body}}
    {{partial "author"}} </script>`
  • {{view}} `<script type="text/x-handlebars" data-template-name='author'> Written by {{view.fullName}} </script> <script type="text/x-handlebars" data-template-name='post'>

    {{title}}

    {{body}}
    {{view "author"}} </script>`
    • {{render}} Two parameters
      
      • The first parameter describes the context to be setup.
      • The optional second parameter is a model, which will be passed to the controller if provided.
• Custom Helper
  • Ember.Handlebars.helper('highlight', function(value, options) { var escaped = Handlebars.Utils.escapeExpression(value); return new Ember.Handlebars.SafeString('<span class="highlight">' + escaped + '</span>'); });
{{highlight name}}

ROUTING

COMPONENTS

CONTROLLERS

• All setup work for a controller should be done in the route.
• Mixins

  • `// app/assets/javascripts/mixins/excited.js App.Tested = Ember.Mixin.create({ test: "simple test!!!" })

    // app/assets/javascripts/controllers/user.js App.UserController = Ember.ObjectController.extend(App.Tested, { // your controller code })`

VIEWS

• You can think of a view as a wrapper for a template.
• It contains all the javascript you might want to execute on the template and manages the logic around attributes and class names.
• View Hooks
• Computed Aliases App.UserView = Ember.View.extend({ willInsertElement: function() { }, didInsertElement: function() { }, willDestroyElement: function() { } }) ENUMERABLES
  

TESTING