Mike Grassotti's Minimum Viable Ember.js QuickStart Guide

This quickstart guide should get you from __zero to slightly-more-than-zero__ in a couple of minutes. author(s): Mike Grassotti

by mgrassotti

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/bootstrap.css">
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/flat-ui.css">
<script type="text/x-handlebars" data-template-name="list">
  <h3 class="demo-panel-title">This is the list template</h3>
  <ul>
  {{#each item in content}}
      <li>{{item}}</li>
  {{/each}}
   </ul>
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h3 class="demo-panel-title">This is the index template</h3>
  <p>{{message}}</p>
</script>

<script type="text/x-handlebars" data-template-name="application">
  <div class="container">
      <h1>Ember.js is easy?<small> Mike Grassotti's Minimum Viable Ember.js QuickStart Guide</small></h1>
    <p>{{message}}</p>
    <div class="row">
{{#linkTo index class="span3 btn btn-large btn-block"}}Home{{/linkTo}}
      {{#linkTo list class="span3 btn btn-large btn-block"}}List{{/linkTo}}
    </div>
    {{outlet}}
  </div>
</script>

JavaScript

App = Ember.Application.create({});

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

App.ApplicationController = Ember.Controller.extend({
    message: 'This is the application template' 
});

App.IndexController = Ember.Controller.extend({
  message: 'Hello! See how index.hbs is evaluated in the context of IndexController' 
});

App.ListRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['angular.js', 'backbone.js', 'ember.js']);
  }
});