Skip to content

A tool for creating modular JavaScript code based on Backbone Views.

License

Notifications You must be signed in to change notification settings

wescravens/bearing

Repository files navigation

#Bearing.js A tool for creating modular JavaScript code based on Backbone Views.

###Install with Bower

bower install bearing

###Create your first View

Bearing.createClass('TestView', {
	setup: function() {
		// this will be called when the view instance is created
	},
	events: {
		'click': 'doSomething',
		'click .btn': 'submitForm'
	},
	deliver: function() {
		// deliver the view
		this.$el.html('<h1>Hello There</h1>');
		return this;
	},
	doSomething: function() {},
	submitForm: function() {}
});

Bearing uses a data-use directive to initialize views on DOM ready.

<div class="my-feature" data-use="TestView"></div>

Bearing uses similar syntax to Backbone Views, though behind the scenes, a few things have changed. The key differences are the use of jQuery for event delegation and the removal of the Underscore dependency. The key use for Bearing is to create modular JavaScript that only interacts within its DOM scope, and to have a simple way to manage events.

###Event History

Bearing also includes an an event history option which can be turned on as demonstrated above. This will store every event triggered within the view in this.eventHistory. The entire jQuery event object gets stored along with some data from the view such as the method called. This is accessible via data within the event object. Bearing events will always pass in the event object in the parameters of the method called. All active event listeners are stored in this.listeningTo.

###Feature Documentation

Here is a list of all of the functions available by default.

  • setup(): Called when the view is instantiated. Do you initializations here.
  • deliver(): Where your main rendering should happen. You can use whatever medium you want for delivering markup to the root element. The typical deliver function would include this.$el.html(<yourMarkupHere>);
  • events: An easy way to manage your event listeners in one place in the view. The event key value pairs get split up and inserted into jQuery's on and off functions where the actual events are delegated.
  • eventHistory: An array of jQuery event objects. If enableHistory is set to true, every event that fires will be stored in it's corresponding view's history.
  • listeningTo: An object containing objects with data from the events hashes. This contains all active event listeners for the view.
  • listen(): The function that delegates hashes in the events object to jQuery's on function.
  • ignore(): Ignores the event passed into the parameters. Format is this.ignore('click .btn');
  • ignoreAll(): Ignores all events in the listeningTo object.
  • destroy(): Removes the view from the DOM, unbinds all active event listeners, and empties eventHistory

Feel free to email me with questions, bugs, or improvements.

About

A tool for creating modular JavaScript code based on Backbone Views.

Resources

License

Stars

Watchers

Forks

Packages

No packages published