New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  filtersService:Ember.inject.service('filters'),
  clientState:Ember.computed.alias('filtersService.filters.clientState'),
  queryStrings:Ember.computed('filtersService.queryStrings',function(){
    return JSON.stringify(this.get('filtersService.queryStrings'));
  }),
  queryStringsObserver:Ember.observer('filtersService.queryStrings',function(){
    console.log(JSON.stringify(this.get('filtersService.queryStrings')));
  }),
  actions:{
    checkboxSelectionChanged:function(filter){
    	filter.set('isSelected',true);
    }
  }
});

models.FilterModel.js

import Ember from 'ember';

export default Ember.Object.extend({
  title:'My Filter',
  items:[],
  selectedItems:Ember.computed('items.@each.isSelected',function() {
    return this.get('items').filterBy('isSelected', true);
  }),
  queryString:Ember.computed('items.@each.isSelected',function(){
    alert('generating query string');
    return this.get('selectedItems').mapBy('name').join(',');
  }),
});

services.filters.js

import Ember from 'ember';
import FilterModel from '../models/FilterModel';
export default Ember.Service.extend({
 init(){
   console.log("here");
    this.set('filters.clientState',FilterModel.create({
      title:'Client State',
      items:[
        Ember.Object.create({name:'All',count:2500,isSelected:true}),
        Ember.Object.create({name:'Online',count:1000,isSelected:false}),
        Ember.Object.create({name:'Offline',count:1500,isSelected:false})
      ]
    }));
  },
  filters:{
  },
  queryStrings:Ember.computed('filters.clientState.queryString',function(){
    alert('Generating multiple querystrings');
    return {
      clientState:this.get('filters.clientState.queryString')
    };
  })
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

{{clientState.title}}
    {{#each clientState.items as | filterItem |}}
        <div><label><input type="checkbox" checked={{filterItem.isSelected}} onchange={{action "checkboxSelectionChanged" filterItem }} /> {{filterItem.name}}</label></div>
    {{/each}}
<br>
{{queryStrings}}
<br>

twiddle.json

{
  "version": "0.7.2",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.4.3/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.4/ember-template-compiler.js"
  }
}