Question

I am trying to explore Backbone.StateManager but couldn’t find much material on this.
I have gone through the documentation but there is no simple example of using it.

I have made an example like this

(function($) {

    var UserInputView  = Backbone.View.extend({
        states: {
            foo: {
                enter: function () {
                    alert('hi');
                    return console.log('enter bar');
                },
                exit: function () {
                    alert('hi');
                    return console.log('exit foo');
                },
                transitions: {
                    transitions: {
                        'onBeforeExitTo:anotherState': function () {
                            alert('hi');
                        },
                        'onExitTo:anotherState': function () {
                            alert('hi');
                        },
                        'onBeforeEnterFrom:anotherState': function () {
                            alert('hi');
                        },
                        'onEnterFrom:anotherState': function () {
                            alert('hi');
                        }
                    }
                }
            },
            bar: {
                enter: function () {
                    alert('hi');
                    return console.log('enter bar');
                },
                exit: function () {
                    alert('hi');
                    return console.log('exit bar');
                },

            }
        },
        initialize: function () {
            var statemanager;

            alert('intialized');
            console.log(this.states);
            statemanager = Backbone.StateManager.addStateManager(this.states);

            return statemanager;
        },
        render: function () {

            alert('render');
        }
    });
    var user = new UserInputView();

})(jQuery);

In all this code only intialization function is working. Rest of the code is not functioning. Please guide

Answer 1

Basically, your code misses a state change and a correct target for Backbone.StateManager.addStateManager. As stated in the documentation, to use Backbone.StateManager with objects

StateManager provides an easy method to painlessly add a StateManager
to any object. StateManager.addStateManager takes a target object and
an optional set of options, reads in any states defined on the target,
and creates a new StateManager. It also sets a number of methods on
target, including triggerState, getCurrentState, and a reference to
the StateManager at target.stateManager.

which means that the target for Backbone.StateManager.addStateManager should be your object instance and that you can start changing state with model.triggerState. For example :

var UserInputView  = Backbone.View.extend({
    states: {
        // your states
    },
    initialize: function () {
        var statemanager;
        statemanager = Backbone.StateManager.addStateManager(this);
    }
});

var user = new UserInputView();
user.triggerState('foo');

A demo based on your code, to visualize some state manipulations