Burning alive with ember.js

• Guides you into doing the right thing. 
  
• Answers the trivial questions for you. 
  
• Solves the 80% use case.

• Well defined layers keep code manageable.
• Performance built into the framework.
• Security built into the framework.

• Transition in state changes the URL

 App = Ember.Application.create({
  LOG_TRANSITIONS: true,
  LOG_TRANSITIONS_INTERNAL: true,
  LOG_VIEW_LOOKUPS: true,
  LOG_ACTIVE_GENERATION: true
});

• Namespace for application.
• Setting application wide configuration.

  <script type="text/x-handlebars" data-template-name='application'>
    <div class="navbar">
      <div class="navbar-inner">
        <a class="brand" href="#">Bloggr</a>
        <ul class="nav">
          <li>{{#link-to 'posts'}}Posts{{/link-to}}</li>
          <li>{{#link-to 'about'}}About{{/link-to}}</li>
        </ul>
      </div>
    </div>

    {{outlet}}
  </script>

• Defines HTML to be rendered.
• Specifies how to bind data.
• Specifies events that are propagated.

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

• Maps a URL into a Route, Controller, View, and Template
• Defines dynamic segments that can be used to reconstruct application state.

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('stackFlow', DiscoverySettings.stackFlow);
  }
});

• Deserializing the URL into a model.
• Serializing the model into a URL.
• Providing the controller with it's data.
• Managing transitions between states.

App.OptionController = Ember.ObjectController.extend({
  needs: ['stacks'],

  selected: function(){
    return this.get('controllers.stacks.model').contains(this.get('model'));
  }.property('controllers.stacks.model', 'model')
});

• Act as a decorator to the model.
• Provide the template it's data.
• Respond to state changing events.
• Manage representational state.

MyView = Ember.View.extend({
  classNameBindings: ['propertyA', 'propertyB'],
  propertyA: 'from-a',
  propertyB: function() {
    if (someLogic) { return 'from-b'; }
  }.property()
});

• Defining wrapping tag for template.
• Handling animation.
• Responding to representational events.

 <li id="ember3402" class="ember-view option iphone">
   <figure class="option-figure">
     <img src="https://cdn.gazelle.com/gz_attachments/product_image/230/949/3/iphone_5s_16.jpg" data-bindattr-2="2" class="option-image">
     <figcaption class="option-name"><script id="metamorph-8-start" type="text/x-placeholder"></script>iPhone<script id="metamorph-8-end" type="text/x-placeholder"></script></figcaption>
   </figure>
 </li>