Ember Twiddle Demo: Mirage with Ember Twiddle

README.md

Ember Twiddle Demo: Mirage with Ember Twiddle

Demo

This is a very trivial example of using mirage with Ember Twiddle.

adapters.application.js

import DS from 'ember-data';

export default DS.RESTAdapter.extend({
  namespace: '/api'
});

adapters.bookmark.js

import DS from 'ember-data';

export default DS.JSONAPIAdapter.extend({
	namespace: '/api'
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
	actions: {
    addBookmark(bookmark) {
			this.store.createRecord('bookmark', { bookmark }).save();
    }
  }
});

controllers.lot.js

import Ember from 'ember';

export default Ember.Controller.extend({
	actions: {
    addBookmark(bookmark) {
			this.store.createRecord('bookmark', { bookmark }).save();
    }
  }
});

mirage.config.js

import Collection from 'ember-cli-mirage/orm/collection';

export default function() {
  window.server = this;
	this.namespace = '/api';
  this.get('/novels', function (schema, request) {
    var novels ={ 
      novels: [
      { id: 1, name: 'Neuromancer' }, 
      { id: 2, name: 'The Hours' },
      { id: 3, name: 'Tales of the City' }
      ]
    };
    return novels;
  });
  
  this.get('/bookmarks', function (schema, request) {
    var data ={ 
      data: [
        {  
           "id":1,
           "attributes":{  
              "address":null
           },
           "relationships":{  
              "bookmark":{  
                 "data":{  
                    "type":"novel",
                    "id":"1"
                 }
              }
           },
           "type":"bookmarks"
        }, 
      ]
    };
    return data;
  });
  
  this.post('/bookmarks', function(schema, request) {
    const response = JSON.parse(request.requestBody);
    response.data.id = 2;
    return JSON.parse(JSON.stringify(response));
  });
};

models.bookmark.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  bookmark: belongsTo('bookmark', { inverse: 'bookmark' })
});

models.novel.js

import Bookmarkable from './bookmark';

export default Bookmarkable.extend({
  name: DS.attr('string')
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('lot', { path: 'lots/:id' });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.store.findAll('novel').then((novels) => {
      // I always need this line:
			this.store.findAll('bookmark');
      return novels;
    });
  }
});

routes.lot.js

import Ember from 'ember';

export default Ember.Route.extend({
  model(params) {
    return this.store.findRecord('lot', params.id);
  }
});

templates.application.hbs

<header>
  <h1>Mirage</h1>
</header>

<h2>Novels</h2>
<ul>
{{#each model as |novel|}}
  <li>
  	{{link-to novel.name 'lot' novel}} 
  </li>
{{/each}}
</ul>
{{outlet}}

templates.lot.hbs

{{model.name}} 
<button 
  style="	background-color: {{if model.bookmark 'darkorange' 'green'}}; 
          color: white" 
  {{action 'addBookmark' model}}
>
  Bookmark
</button>

twiddle.json

{
  "version": "0.11.3",
  "ENV": {
    "ember-cli-mirage": {
      "enabled": true
    }
  },
  "EmberENV": {},
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0"
  },
  "addons": {
    "ember-cli-mirage": "0.2.4"
  }
}