Navigation

adapters.application.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({
  width:0,
  height:0,
  names: ['Stefan', 'Miguel', 'Tomster', 'Pluto'],
  actions: {
    foo() { }
  }
});

input-field.component.js

import Ember from 'ember';

export default Ember.TextField.extend({
    attributeBindings:['style'],
    focusIn() {
        "use strict";
        this.$().select();
    }
});

locales.de.translations.js

export default {
	test:"Hallo"
};

main-navigation.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName:"nav",
  classNames:['d-flex justify-content-between p-2']
});

main-navigation.template.hbs

<a href="/" class="navbar-brand">
<img style="max-width:40px" src="https://jsbin-user-assets.s3.amazonaws.com/mwoy_aventoura/apple-touch-icon-180x180.png">
</a>
 <div class="d-flex">
 {{yield}}
 </div>

mirage.config.js

import Mirage from 'ember-cli-mirage';

export default function() {
   	this.namespace = "api";
    this.get("/ads");
} 

mirage.factories.ad.js

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


export default Factory.extend({
    id(i) { return i;},
    name() {return faker.name.firstName();},
    width() {return faker.random.number({'min':500, 'max':1000});} ,
    isCustom: false
});

mirage.factories.application.js

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


export default Factory.extend({
    id(i) { return i;},
    name() {return faker.name.firstName();},
    width() {return faker.random.number({'min':500, 'max':1000});} ,
    isCustom: false
});

mirage.models.ad.js

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

export default Model.extend({
});

mirage.models.application.js

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

export default Model.extend({
});

mirage.scenarios.default.js

export default function(server) {
    server.createList('ads', 3);
}

mirage.serializers.application.js

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

export default JSONAPISerializer.extend({
}); 

models.ad.js

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


export default Model.extend({
    name: DS.attr('string'),
    width: DS.attr('string'),
    isCustom:DS.attr('boolean')
});

models.application.js

import DS from 'ember-data';

export default Model.extend({ 
    name: DS.attr('string'),
    width: DS.attr('string'),
    isCustom:DS.attr('boolean')
});

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  
  model() {
   return this.store.findAll("ad");
  }
  
});
 

templates.application.hbs

{{#main-navigation}}
 <select class="custom-select mr-2">
    <option selected>Responsive</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  		{{input-field value=width}}
      <div class="d-flex align-items-center ml-2 mr-2">X</div>
 			{{input-field value=height}}
{{/main-navigation}}
{{#power-select
  options=names
  onchange=(action "foo")
  as |name|
}}
  {{name}}
{{/power-select}} 

{{#each model as |test|}}
works
{{/each}}

twiddle.json

{
  "version": "0.11.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "ENV": {
  "ember-cli-mirage": {
      "enabled": true
    },
      "namespace":"api",
      "rootURL": "/",
      "locationType":"auto"
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "bootstrapCss": "https://adwords.woytec.de/mdb/css/bootstrap.min.css",
    "mdbCss": "https://adwords.woytec.de/mdb/css/mdb.min.css",
    "jquery": "https://adwords.woytec.de/mdb/js/jquery-3.1.1.min.js",
    "tether": "https://adwords.woytec.de/mdb/js/tether.min.js",
    "bootstrapJs": "https://adwords.woytec.de/mdb/js/bootstrap.min.js",
    "mdbJs": "https://adwords.woytec.de/mdb/js/mdb.min.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {
    "ember-power-select": "*",
    "ember-cli-mirage": "*"
  }
}