#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 typicaldeliver
function would includethis.$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'son
andoff
functions where the actual events are delegated.eventHistory
: An array of jQuery event objects. IfenableHistory
is set totrue
, every event that fires will be stored in it's corresponding view's history.listeningTo
: An object containing objects with data from theevents
hashes. This contains all active event listeners for the view.listen()
: The function that delegates hashes in theevents
object to jQuery'son
function.ignore()
: Ignores the event passed into the parameters. Format isthis.ignore('click .btn');
ignoreAll()
: Ignores all events in thelisteningTo
object.destroy()
: Removes the view from the DOM, unbinds all active event listeners, and emptieseventHistory
Feel free to email me with questions, bugs, or improvements.