Mockjax Sample

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  init() {
    this._super(...arguments);
    
    let COLORS = [
      { id: 1, name: 'Red' },
      { id: 2, name: 'Blue' },
      { id: 3, name: 'Green' }
    ];
    let server = new Pretender(function() {
    	this.get('/api/colors', function(request) {
    		return [
          200,
          {"Content-Type": "application/json"},
          JSON.stringify(COLORS)
        ];
      });
    });
    
    /*
    // Include "jquery-mockjax": "https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.js" in twiddle.json
    $.mockjax({
      url: '/api/colors',
      responseText: {
        colors: [
          { id: 1, name: 'Red' },
          { id: 2, name: 'Blue' },
          { id: 3, name: 'Green' }
        ]
      }
    });
    */
  },
  model() {
    return $.getJSON('/api/colors');
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>

<ul>
{{#each model as |color|}}
	<li>{{concat color.name " (" color.id ")"}}</li>
{{/each}}
</ul>

<div>
	{{outlet}}
</div>

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.2.0",
    "ember-data": "2.2.0",
    "ember-template-compiler": "2.2.0",
    "fake-xml-http-request": "https://rawgit.com/pretenderjs/FakeXMLHttpRequest/master/fake_xml_http_request.js",
    "route-recognizer": "https://rawgit.com/tildeio/route-recognizer/master/dist/route-recognizer.js",
    "pretender": "https://rawgit.com/pretenderjs/pretender/master/pretender.js"
  }
}