New Twiddle

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  queryParams: {
    perPage: {refreshModel: true },
    first_name: {refreshModel: true},
    color: {refreshModel: true}
  },
    
  model(params){
		return params;
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  queryParams: ['color', {perPage: 'per_page'}, {firstName: 'first_name'}],
  
  color: 'red',
  perPage: 2,
  firstName: 'bob',
  
  keys: Ember.computed('model', function(){
    var keys = Object.keys(this.get('model'));
    var model = this.get('model');
    var modelContents = [];
    keys.forEach(function(key){
      modelContents.push({key: key, value: model[key]});
    });                       
                        
    return modelContents
  })
});

templates.application.hbs

{{#each keys as |key|}}
  <p>{{key.key}}: {{key.value}}</p>
{{/each}}

twiddle.json

{
  "version": "0.4.8",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.9/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.8/ember-template-compiler.js"
  }
}