New Twiddle

controllers.application.js

import Ember from 'ember';

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

controllers.something.js

import Ember from 'ember';
import QueryParams from 'ember-parachute';

const QP = new QueryParams({
  x: {
    defaultValue: true,
    refresh: true
  },
  y: {
    defaultValue: false,
    refresh: true
  }
});

export default Ember.Controller.extend(QP.Mixin, {
  z: 1,
  setup() {
    console.log("Setup");
  },
  
  queryParamsDidChange({changes}) {
    console.log("QP did change", changes);
  },

  actions: {
    changeX() {
      this.toggleProperty('x');
    },
    changeY() {
      this.toggleProperty('y');
    },
    updateSegment() {
      this.incrementProperty('z');
      this.transitionToRoute('something', this.get('z'));
    }
  }
});

router.js

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

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

Router.map(function() {
  this.route('something', {
    path: '/something/:id'
  });
});

export default Router;

routes.something.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    console.log("Model fired");
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
{{link-to 'something' 'something' 1}}
<br>
<br>

templates.something.hbs

<a href="#" {{action 'changeX'}}>Change x</a>
<a href="#" {{action 'changeY'}}>Change y</a>
<a href="#" {{action 'updateSegment'}}>Update segment</a>

twiddle.json

{
  "version": "0.12.1",
  "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.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-parachute": "0.3.2"
  }
}