Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Ember State Services

Build Status Code Climate Ember Observer Score npm version

This addon introduces a state management pattern for your ambitious applications.

State management is one of the most complex aspects of large application design and when done wrong often leads to bugs and errors. EmberJS contains 2 high-level avenues for storing state: controllers (long-term state) and components (short-term state). Controllers are singletons and any state you set on them will stay there until your application is reloaded or you override the previous value. Components on the other hand are created and destroyed as they enter/leave the DOM and any state that is set on them will be removed/reset each time they are recreated. As you build more complex applications you will find yourself needing a way to have some sort of middle ground solution. Something that has properties of both long-term state and short-term state. This is what ember-state-services sets out to provide.

An example could be a master/detail experience where the detail view is a component which allows editing of content. It would be unfortunate if navigating would lose un-saved changes (short-term state); it would also be unfortunate if the state between the edit components were to leak between each other (long-term state). Instead, the addon issues a unique state per reference key, which keeps management safe and easy.


ember install ember-state-services


State file

 * First create a state file that returns an object within app/states/<STATE_NAME>.js
import Ember from 'ember';

export default Ember.Object.extend();



import Ember from 'ember';
import stateFor from 'ember-state-services/state-for';

export default Ember.Component.extend({
  tagName: 'form',

  * stateFor returns a computed property that provides a given
  * state object based on the 'email' property. Whenever email
  * changes a new state object will be returned.
  * This allows us to create private state, accessible only to those
  * with access to the given model (email in this case) and the state
  * bucket (<STATE_NAME> in this case).
  data: stateFor('<STATE_NAME>', 'email'),

  actions: {
    submitForm() {
      // apply changes to the email model


<label>Subject: {{input value=data.subject}}</label><br>
<label>from:   {{input value=data.from}}</label><br>
<label>body:   {{textarea value=data.body}}</label><br>
<button {{action 'submitForm'}}>Submit Form</button>


Setting initial state

import Ember from 'ember';

const MyStateObject = Ember.Object.extend();

  initialState(instance) {
    return {
      foo: 'bar',
      hello: 'world'

export default MyStateObject;

Using ember-buffered-proxy

import BufferedProxy from 'ember-buffered-proxy/proxy';

const MyStateObject = BufferedProxy.extend();

  initialState() {
    return {
      content: {
        foo: 'bar',
        hello: 'world'

export default MyStateObject;

Learn more about buffered proxy:

Example Demo

git clone
cd ember-state-services
npm i; bower i
ember server

Then visit the demo app: http://localhost:4200 in your browser

You can’t perform that action at this time.