ember-starter

A basic jsFiddle template for Ember.js applications.

by ethan_selzer

HTML

<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/handlebars-1.0.0-rc.3.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-1.0.0-rc.2.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/ember-data-a29070da.min.js"></script>
<link rel="stylesheet" href="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.css">
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/mocha-1.9.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/sinon-1.6.0.js"></script>
<script src="	 https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-1.5.0.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/sinon-chai.js"></script>
<script src="https://s3.amazonaws.com/kiddsoftware-jsfiddle/chai-jquery.js"></script>
<!-- Mocha test output goes here. -->
<div id="mocha"></div>

<!-- Handlebars templates for our application. -->
<script type="text/x-handlebars">
    <h1>Testing Ember.js with Mocha</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
    <p>{{#linkTo 'employees'}}Show employees{{/linkTo}}</p>
</script>
    
<script type="text/x-handlebars" data-template-name="employees">
    <h2>Employees</h2>
    <ul>
       {{#each employee in controller}}
         <li>{{#linkTo 'employee' employee}}{{employee.name}}{{/linkTo}}</li>
       {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="employee">
    <h2>{{name}}</h2>
    <p>Salary: <span class="salary">${{salary}}</span></p>
    <button {{action 'giveRaise'}}>Give Raise</button>
    {{#if managedBy}}
      <p class="managed-by">
         Managed by: {{#linkTo 'employee' managedBy}}{{managedBy.name}}{{/linkTo}}
      </p>
    {{/if}}
    {{#if manages}}
      <h3>Manages</h3>
      <ul class="manages">
       {{#each employee in manages}}
          <li>{{#linkTo 'employee' employee}}{{employee.name}}{{/linkTo}}</li>
       {{/each}}
      </ul>
    {{/if}}
 ...

JavaScript

//================================================================================
// Application Code

window.App = Ember.Application.create();

// Our normal data store, which we be overridden when testing.
App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.RESTAdapter.create()
});

App.Employee = DS.Model.extend({
    name: DS.attr("string"),
    salary: DS.attr("number"),
    managedBy: DS.belongsTo("App.Employee"),
    manages: DS.hasMany("App.Employee")
});

App.Router.map(function () {
    this.route("index", { path: "/" });
    this.route("employees", { path: "/employees" });
    this.route("employee", { path: "/employee/:employee_id" });
});

App.EmployeesRoute = Ember.Route.extend({
    model: function (params) {
        return App.Employee.find();  
    }
});

App.EmployeeRoute = Ember.Route.extend({
    model: function (params) {
        return App.Employee.find(params.employee_id);  
    }
});

App.EmployeesController = Ember.ArrayController.extend();

App.EmployeeController = Ember.ObjectController.extend({
    giveRaise: function () {
        this.set("salary", this.get("salary") * 1.10);
    }
});

// Declare this explicitly so we can test it.
App.EmployeeView = Ember.View.extend({
    // Only needed so we can be called outside of a route by our unit tests.
    templateName: 'employee'   
});

//================================================================================
// Test Code

// Configure Mocha, telling both it and chai to use BDD-style tests. 
mocha.setup("bdd");
chai.should();

// Replace our fixture-based store with a REST-based store for testing, so we
// don't need a server.  We disable simulateRemoteResponse so that objects will
// appear to load at the end of every Ember.run block instead of waiting for a
// timer to fire.
App.Store = DS.Store.extend({
    revision: 12,
    adapter: DS.FixtureAdapter.create({ simulateRemoteResponse: false })
});

// Declare some fixture objects to use in our test application. ...