ember-parachute

controllers.application.js

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

export const myQueryParams = new QueryParams({
  parachuteOpen: {
    as: 'parachute',
    defaultValue: true,
  },
  page: {
    defaultValue: 1,
    refresh: true
  },
  search: {
    defaultValue: '',
    refresh: true
  },
  tags: {
    defaultValue: ['Ember', 'Parachute'],
    refresh: true,
    serialize(value) {
      return value.toString();
    },
    deserialize(value = '') {
      return value.split(',');
    }
  }
});

export default Ember.Controller.extend(myQueryParams.Mixin, {
  queryParamsChanged: Ember.computed.or('queryParamsState.{page,search,tags}.changed'),

  fetchedDataAt: null,
  
  queryParamsDidChange({ shouldRefresh, queryParams }) {
    // if any query param with `refresh: true` is changed, `shouldRefresh` is `true`
    if (shouldRefresh) {
      this.fetchData(queryParams);
    }
  },

  fetchData(queryParams) {
    this.set('fetchedDataAt', new Date);
  },

  actions: {
    resetAll() {
      // reset all query params to their default values specified in the query param map
      this.resetQueryParams();
    },
    updateTag(index, tag) {
    	this.get('tags').replace(index, 1, [tag]);
    },
    pushTag(tag) {
    	this.get('tags').pushObject(tag);
    },
    removeTag(tag) {
      this.get('tags').removeObject(tag);
    }
  }
});

templates.application.hbs

queryParamsChanged: {{queryParamsChanged}}<br>
fetchedDataAt: {{fetchedDataAt}}<br>

page: {{one-way-number page update=(action (mut page))}}<br>

<br>
tags:

<ul>
  {{#each tags as |tag i|}}
    <li>{{one-way-input tag update=(action "updateTag" i)}} <button {{action "removeTag" tag}}>x</button></li>
  {{/each}}
</ul>

{{one-way-input newTag
  keyEvents=(hash
   13=(action "pushTag")
  )
}} (hit enter to push tag)<br>

<button {{action "resetAll"}}>Reset QP</button>

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-data": "2.12.1",
    "ember-parachute": "0.2.2",
    "ember-one-way-controls": "2.0.0"
  }
}