query-param-service

account.service.js

import Ember from 'ember';
const {computed} = Ember;

export default Ember.Service.extend({
  _account: null,
  account: computed('_account', {
  	get(key) {
      return this.get('_account');
    },
    set(key, val) {
      this.updateAccountValue(val);
      return this.get('_account');
    }
  }),
  isDirty: false,
  isValidAccount(val) {
  	return val > 3;
	},
  validateValue(val) {
  	if (this.isValidAccount(val)) {
      return val;
    } else {
      return this.get('_account');
    }
  },
  initAccountValue(val) {
    this.set('_account', this.validateValue(val));
  },
  updateAccountValue(val) {
    let valid = this.isValidAccount(val);
  	if (valid) {
      if (this.get('_account') === null) {
        this.initAccountValue(val);
      } else {
	    	this.set('_account', val); 
      }
    }
    return valid;
  },
  checkDirty(val) {
    if (this.get('isDirty')) {
      val = this.get('account');
    	this.set('isDirty', false);
   	}
    return val;
  },
  changeAccount(val){
 		let value = this.get('account');
		if (typeof val === 'string'){
			if (val === 'prev') {
				value--;
			} else if (val === 'next') {
				value++;  
 			} else {
				value = parseInt(val);  
			}
  	}
    this.set('isDirty', true);
		this.set('account', this.validateValue(value));
	}
});

application.controller.js

import Ember from 'ember';
const {computed, inject} = Ember;

export default Ember.Controller.extend({
  as: inject.service('account'),
  appName:'Ember Twiddle',
  queryParams: ['account'],
  account:null,
  inputValue: computed.alias('account'),
  // this computed is key, as it watches both the query param and the value on the service
  isValidAccount: computed('account', 'as.account', {
 		get() {
      // if the service value is dirty, use it
      let val = this.get('as').checkDirty(this.get('account'));
      // set the new val
      this.set('account', val);
      return this.get('as').updateAccountValue(val); 
    }
	}),
  actions: {
    changeAccount(val) {
    	this.get('as').changeAccount(val); 
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<!--
isValidAccount is simply here to trigger it since it is the computed that sets the value
-->
{{#if isValidAccount}}account: {{as.account}}
{{else}}
Only accounts with id 4 and above are valid.
{{/if}}
<br>

<input type="text" value={{inputValue}} oninput={{action "changeAccount" value="target.value"}}>
<br>
{{prev-next change=(action "changeAccount")}}
<p>
For the example, accounts with an id of 3 or less are invalid, and won't be set.
</p>

prev-next.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

prev-next.template.hbs

{{yield}}
<button {{action attrs.change "prev"}}>prev</button>
<button {{action attrs.change "next"}}>next</button>

twiddle.json

{
  "version": "0.5.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "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.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}