Ember Twiddle Demo: Mirage with Ember Twiddle

components.foo-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  computedModel: Ember.computed('model.[]', function() {
    return this.get('model').map(function(m) {
      return `Computed: ${m.id}`;
    });
  }),

  computedModelChanged: Ember.observer('model', function() {
    console.log('computedModelChanged');
  }),

  init() {
    this._super(...arguments);
    this.get('computedModelChanged');
  },

  actions: {
    refreshModel() {
      this.sendAction('invalidateModel');
    }
  }
});

mirage.config.js

export default function() {
  
	this.get('/posts', ({ posts }, request) => {
    this.create('post');
    return posts.all();
  });
  
};

mirage.factories.post.js

import { Factory } from 'ember-cli-mirage';

export default Factory.extend();

mirage.models.post.js

import { Model } from 'ember-cli-mirage';

export default Model;

models.post.js

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

export default Model.extend({
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('post');
  },
  
  actions: {
    invalidateModel() {
      this.refresh();
    }
  }
});

templates.application.hbs

{{foo-component model=model invalidateModel="invalidateModel"}}

templates.components.foo-component.hbs

Model:<br>
{{#each computedModel as |m|}}{{m}}<br>{{/each}}
<br>
<button {{action "refreshModel"}}>Refresh model</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"
  }
}