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.

components.form-example.js

import Ember from 'ember';

const { computed, get, set } = Ember;

export default Ember.Component.extend({
  tagName: 'form',
  
  noName: computed.empty('model.name'),
  cannotSubmit: computed.or('noName', 'activePromise.isPending'),
  
  submit(event) {
		event.preventDefault();
    let promise = get(this, 'model').save();
    set(this, 'activePromise', promise);
  },
  
  actions: {
    setValue(nameValue) {
      set(this, 'model.name', nameValue);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({

});

mirage.config.js

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

export default function() {
  window.server = this;
  this.timing = 1000;

  this.post('/foos', function (schema, { requestBody }) {
    let { name } = JSON.parse(requestBody).data.attributes;
    if (name == 'success') {
      return new Response(204);
    } else {
      return new Response(422);
    }
  });
};

models.foo.js

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

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

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
	model() {
    return this.get('store').createRecord('foo', { id: 1 });
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

button {
  text-decoration: none;
  color: #fff;
  background-color: #26a69a;
  text-align: center;
 	letter-spacing: .5px;
	width: 50%;
  font-size: 150%;
  height: 50px;
}

button:disabled {
  background-color: #888;
}

templates.application.hbs

<header>
  <h1>Async button</h1>
</header>

{{form-example model=model}}

templates.components.form-example.hbs

<input type="radio" name="fooName" value="success" onchange={{action "setValue" "success"}}>Successful Submit<br />
<input type="radio" name="fooName" value="fail" onchange={{action "setValue" "fail"}}>Failed Submit<br />
<br />
<br />
<button type="submit" disabled={{cannotSubmit}}>
	{{#if activePromise.isPending}}
  	Saving...
  {{else if activePromise.isFulfilled}}
  	Saved!
  {{else if activePromise.isRejected}}
  	Submission failed
  {{else}}
		Submit
  {{/if}}
</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"
  }
}