catcomponent

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  url: "https://placekitten.com/300/300",
  hidden: false,
  _updateImageUrl(ww, hh) {
    this.set('url', `https://placekitten.com/${ww}/${hh}`);
  },
  actions: {
    kittenSizeChanged(width, height) {
      Ember.run.debounce(this, '_updateImageUrl', width, height, 300);
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

router.js

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

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

Router.map(function() {
  
  
  
  
  
  
  //"/authors" --> Something  // All authors (the list of them)
  
  this.route("authors");
  this.route("author", {path: "authors/:author_name/main"});
  this.route("author-articles", {path: "authors/:author_name/articles"});
  
  //"/author/:id" --> Something, // One author's homepage
  //"/author/:id/articles" --> SomethingElse  // An article written by this author
  
  
});

export default Router;

routes.authors.home.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    var authorName = params.author_name;
    return { name: authorName };
  }
});

styles.app.css

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

templates.application.hbs

{{link-to "List of Authors" "authors"}}
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

{{#my-component w=400 h=600}}
	This is a sassy kitty
{{/my-component}}


{{#my-component w=400 h=600}}
	This is a cool kitty
{{/my-component}}

<br>
<br>

templates.author-articles.hbs

<h1> articles </h1>

templates.author.hbs

<h2>Author page for: </h2>

see my articles {{link-to 'here!' 'author-articles' 'mike'}}

templates.authors.hbs

<h1>The list of authors</h1>

<ul>
  <li>{{link-to "Lisa" "author" "lisa"}}</li>
  <li>{{link-to "Mike" "author" "mike"}}</li>
</ul>

{{outlet}}

templates.authors.home.hbs

<h2>Home for: {{model.name}}</h2>

see my articles {{link-to 'here!' 'author-articles' 'mike'}}

templates.components.my-component.hbs

<p>300{{input type="range" value=w max=700 min=300 input=(action 'kittenSizeChanged' w h)}}700</p>
<p>300{{input type="range" value=h max=700 min=300 input=(action 'kittenSizeChanged' w h)}}700</p>

<p> hide me: {{input type='checkbox' checked=hidden}}</p>

{{#unless hidden}}
<img src={{url}}/>
{{/unless}}

<p>
{{yield}}
</p>

twiddle.json

{
  "version": "0.10.6",
  "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": {}
}