Em

app.js

import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
import 'demo-app/helpers/equal';
var App;

Ember.MODEL_FACTORY_INJECTIONS = true;

App = Ember.Application.extend({
  modulePrefix: config.modulePrefix,
  podModulePrefix: config.podModulePrefix,
  Resolver: Resolver
});

loadInitializers(App, config.modulePrefix);

export default App;

application.controller.js

import Ember from 'ember';

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

application.template.hbs

<h3> query-params </h3>
<br>
<br>
{{outlet}}
<br>
<br>

helpers.equal.js

export default Em.Helper.helper(function([value1, value2]) {
return value1 === value2;
});

home.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
model: [ 
          {
          "routeName":"laptop",
          "param": {"color":"blue"}
          },
          {
          "routeName":"mobile",
          "param": {"size":"5.5"}
          },
          {
          "routeName":"notebook",
          "param": {"display":"HD"}
          }
        ]
});

home.template.hbs

{{#each model as |obj|}}

{{#if (equal obj.routeName 'laptop')}}

{{#link-to obj.routeName (query-params color=obj.param.color)}}
{{obj.routeName}}
{{/link-to}}

{{/if}}

{{#if (equal obj.routeName 'mobile')}}

{{#link-to obj.routeName (query-params size=obj.param.size)}}
{{obj.routeName}}
{{/link-to}}

{{/if}}

{{#if (equal obj.routeName 'notebook')}}
{{#link-to obj.routeName (query-params display=obj.param.display)}}
{{obj.routeName}}
{{/link-to}}
{{/if}}

<br>
<br>

{{/each}}

laptop.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
queryParams:['color']
});

laptop.template.hbs

<h4> Laptop </h4>


Your Laptop color is {{color}}

<br>
<br>
<br>

{{#link-to 'home'}} home {{/link-to}}

mobile.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
queryParams:['size']
});

mobile.template.hbs

<h4> Mobile </h4>

Your Mobile Size is {{size}}


<br>
<br>
<br>

{{#link-to 'home'}} home {{/link-to}}

notebook.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
queryParams:['display']
});

notebook.template.hbs

<h4> Notebook </h4>

Your Notebook Display Type is {{display}}


<br>
<br>
<br>

{{#link-to 'home'}} home {{/link-to}}

router.js

import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('home', { path:'/' });
  this.route('laptop');
  this.route('mobile');
  this.route('notebook');
});

export default Router;

twiddle.json

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