MIrageTest

components.my-view-model.js

import Ember from 'ember';
import get from 'ember-metal/get';
import set from 'ember-metal/set';

export default Ember.Component.extend({
  model: null,
  init() {
    this._super(...arguments);
    this.register(this);
    this.processModel();
  },
  processModel() {
    console.debug(get(this,'model'))
    if (get(this,'model.isLoaded') && get(this,'model.species.isLoaded')) {
      console.debug('startProcessing');
     	set(this, 'name', get(this,'model.name'));
      set(this, 'noise', get(this,'model.species.noise'));
      set(this, 'animalType', get(this,'model.species.animalType'));
    } else {
      console.debug('startLoop');
    	Ember.run.later(this, this.processModel, 500); 
    }
  },
  reset() {
   this.processModel(); 
  },
  
  save() {
   	set(this, 'model.name', get(this, 'name'));
    
    let modelSpecies = get(this, 'model.species');
    set(modelSpecies, 'noise', get(this, 'noise'));
    set(modelSpecies, 'animalType', get(this, 'animalType'));
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'ViewModel Demo',
  vmList: [],
  hasSelectedModel: Ember.computed('selectedModel', function() {
  	return this.get('selectedModel') ? true : false;
  }),
  actions: {
    registerVM(vm) {
      this.vmList.push(vm);
    },
    resetVM() {
    	this.vmList.forEach((vm)=>{
      	vm.reset();
      }); 
    },
    saveVM() {
      this.vmList.forEach((vm)=>{
      	vm.save();
      }); 
      this.set('selectedModel', null); 
    },
    edit(model) {
     	this.set('selectedModel', model); 
    }
  }
});

mirage.config.js

export default function() {
  
  this.get('/animals');
  this.get('/species');
  this.get('/species/:id');

}

mirage.factories.animal.js

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

export default Factory.extend({
  name(i) { return `Animal ${i}`; },
  gender: faker.list.random('Male', 'Female')
});

mirage.factories.species.js

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

let type = ['Cow', 'Cat', 'Dog'];
let noise = ['Moo', 'Meow', 'Bark'];

export default Factory.extend({
  animalType(i) { return type[i]; },
  noise(i) { return noise[i]; }
});

mirage.models.animal.js

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

export default Model.extend({
  species: belongsTo('species')
});

mirage.models.species.js

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

export default Model.extend({
  animal: belongsTo('animal')
});

mirage.scenarios.default.js

export default function(server) {
  
  let species = server.create('species');
  let species2 = server.create('species');
  let species3 = server.create('species');
	server.createList('animal', 2, { species:species });
  server.createList('animal', 3, { species:species2 });
  server.createList('animal', 2, { species:species3 });

};

models.animal.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'),
  gender: attr('string'),
  species: belongsTo('species')
});

models.species.js

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

export default Model.extend({
  animalType: attr('string'),
  noise: attr('string'),
  animals: hasMany('animal')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	return this.get('store').findAll('animal');
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<h2>With direct Model</h2>
<ul>
{{#each model as |entry|}}
	<li>{{entry.name}} is a
  {{entry.species.animalType}} that {{entry.species.noise}} <button {{action 'edit' entry}}>Edit</button></li>
{{/each}}
</ul>
<br>
<br>
{{#if hasSelectedModel}}
<h2>Edited from View Model</h2>
{{#my-view-model model=selectedModel register=(action 'registerVM') as |vmodel|}}
        {{input value=vmodel.name}} is a {{input value=vmodel.animalType}} that {{input value=vmodel.noise}}
{{/my-view-model}}
<br>
<button {{action 'resetVM'}}>Reset ViewModel</button>
<button {{action 'saveVM'}}>Save ViewModel</button>
{{/if}}

templates.components.my-view-model.hbs

{{yield this}}

twiddle.json

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