Organize your application interface with lightweight javascript view components. Works pretty much like a augmented Backbone view with no large dependencies. Weighs around 1.5 KB.
Simple view allows you to delegate or bind events to current element context with a simple declarative syntax. Events strings can be dynamically configured with injected variables. One time events are configured with simple event string prefix. You can listen to window and document events and be sure that all handlers will be cleaned up upon view removal. Every instance of simple view can have sub-views and be used as container of views or collection view.
Components built with Simple view usually have structure similar to one bellow:
var MyView = SimpleView.extend({
defaults: {
titleSelector: '.title'
},
initialize: function(options) {
this.options = $.extend({}, this.defaults, options);
},
events: {
'click .text': 'updateView',
'one:click .toggleBtn': function(e) { // one time events
console.log($(e.target).text());
},
'click {{this.options.titleSelector}}': 'play', // dynamic selector
'resize window': 'updateView', // window events
'one:keyup document': 'handleKeyup'
},
updateView: function() {
// update logic
},
handleKeyup: function() {
// some update logic
}
});
Subclass and add sub views like so:
var MyViewSubClass = MyView.extend({
someExtraMethod: function(){
this.addView(new MyAnotherView({$el: this.$('.subView')}))
}
});
var MyAnotherView = SimpleView.extend({
initialize: function() {
// initializing logic
}
});
var view = new MyViewSubClass({$el: '.test'})
view.remove(); // will remove all attached sub views as well
For browser usage browse dist folder - if working with build tools go with src folder. Download library files from github repo, get them via bower (bower install simple-view) or via npm (npm install jquery-simple-view)