How I would design a SproutCore application statechart and how I would lock actions/events down to the current state. Remember, there is only ever one effective state in the entire application! The effective state is formed from the current chain of substates starting at the root state. Other than the root state alone, no single substate can be …

app_statechart.js

MyApp.statechart = SC.Statechart.create({
  
  
  // Root state
  rootState: SC.State.design({
    
    // Properties
    initialSubstate: 'loggedOutState',
    
    // Actions & Events
    didLogIn: function () {
      this.gotoState('loggedInState');
    },
    
    didLogOut: function () {
      this.gotoState('loggedOutState');
    },
    
    // Substates
    loggedInState: SC.State.extend({
      
      // Properties
      initialSubstate: 'readyState',
      
      // Actions & Events
      doLogOut: function (event, context, options) {
        // Normally this would do some work before sending the didLogOut event.
        this.sendEvent('didLogOut');
      },
      
      didSave: function () {
        // Maybe do something here.
        this.gotoState('readyState');
      },
      
      didCancel: function () {
        // Maybe do something slightly different here.
        this.gotoState('readyState');
      },
      
      // Substates
      readyState: SC.State.extend({
        // Actions & Events
        doEdit: function (event, context, options) {
          this.gotoState('editState');
        }
      }),
      
      editState: SC.State.extend({
        // Actions & Events
        doSave: function (event, context, options) {
          // Normally this would do some work before sending the didSave event.
          this.sendEvent('didSave');
        },
        
        doCancel: function (event, context, options) {
          // Normally this would do some work before sending the didCancel event.
          this.sendEvent('didCancel');
        },
        
        unknownEvent: function (event, context, options) {
          // Block anything other than doSave and doCancel.
          // Possibly put up a prompt to save and when that is done, resend the event, context and options.
        }
      })
      
    }),
    
    loggedOutState: SC.State.extend({
      
      // Actions & Events
      doLogIn: function (event, context, options) {
        // Normally this would do some work before sending the didLogIn event.
        this.sendEvent('didLogIn');
      }
      
    })
});