Marionette.stateview NPM

Marionette.StateView

Marionette.StateView is a simple extension of the default Marionette.View adding an additional bound model for maintaining view state.

Installation

Install this package via npm.

$ npm install marionette.stateview

Dependencies

All dependencies are listed in the package.json as peerDependencies, as this package wouldn't make any sense for any other environment.

Example

import mn from 'backbone.marionette';

const TestView = mn.StateView.extend({

	// Any values provided to defaultState will be
	// set on the state model when it is initialized.
	// Can also be defined as a function that returns
	// data object.
	defaultState: {
		foo: 'bar',
		buz: ['baz', 'zed'],
	},

	// You can interact with the state model just as you would
	// any other entity
	initialize() {
		this.state.set('loading', true);
	},

	// State data is mixed into the template context as "_state"
	template: _.template('Tell me <%= _state.anything %>'),

	// Bind methods to events on the state model just like you
	// do with the view model & collection!
	stateEvents: {
		'change:anything': 'render',
	},
});

Passing-in State

State passed into a new instance of a view will be applied to the instance's state model on construction, mixing-in any defaultState the view class defined:

import mn from 'backbone.marionette';

const TestView = mn.StateView.extend({
	template: false,
	defaultState: {
		foo: 'foo-initial',
		bar: 'bar-initial',
	},
});

const view = new TestView({
	state: {
		foo: 'foo-custom',
		other: 'other-value',
	},
});

console.log(view.state.toJSON());
// {
//		foo: 'foo-custom',
//		bar: 'bar-initial',
//		other: 'other-value',
// }

Sharing state

State can be shared across multiple views by passing an existing state model in the view instance options. Any default state provided by the new view will be mixed into the state model that's passed:

import mn from 'backbone.marionette';

const TestViewA = mn.StateView.extend({
	template: false,
	defaultState: {
		foo: 'foo-initial',
	},
});

const TestViewB = mn.StateView.extend({
	template: false,
	defaultState: {
		bar: 'bar-initial',
	},
});

const viewA = new TestViewA();
const viewB = new TestViewB({ state: viewA.state });

console.log(viewA.state === viewB.state); // true
console.log(viewA.state.toJSON());
// {
// 		foo: 'foo-initial',
// 		bar: 'bar-initial',
// }

Caveats

Marionette.StateView performs some custom actions in the View serializeData() method, so if your view overwrites this function, be sure to invoke the default as well.