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. Event strings can be dynamically configured with injected variables. One time events are configured with simple prefix on event string . You can listen to window and document events and be sure that all handlers will be cleaned up upon view removal.
Every Simple view instance can have sub-views and be used as container of views (collection view). Controller and component views can be easily composed if that is how you want your application to be structured. Choose your view hierarchy as it suits your project needs.
Simple view works great with server side rendered html. There is no requirement for client side templating or rendering of any kind.
Lets build a simple fake guestbook for users to sign (You haven't seen one for a while, did you?). Nothing is persisted and saved to database - so feel free to sign it.
For our fake guestbook to work we had to write following html:
Our guestbook Simple view type is defined like so:
var Guestbook = SimpleView.extend({
initialize: function() {
this.$entryList = this.$('.entryList');
this.$input = this.$('.entryInput');
},
events: {
'submit form': 'handleSubmitEntry',
'resize window': 'updateView',
},
handleSubmitEntry: function(e) {
e.preventDefault();
var message = this.$input.val();
message.length && this.addEntry(message);
this.$input.val('');
},
addEntry: function(message) {
var entryView = this.addView(new GuestbookEntry({message: message}));
entryView.$el.prependTo(this.$entryList);
},
updateView: function() {
this.$el.toggleClass('small', this.$window.width() < 500);
}
});
new Guestbook({$el: '.guestbook'});
Guestbook entries are written as follows:
var GuestbookEntry = SimpleView.extend({
defaults: {
className: 'guestbookEntry',
btnRemoveClass: 'removeEntry'
},
initialize: function(options) {
this.options = $.extend({}, this.defaults, options);
this.$el = $(this.template(this.options));
},
events: {
'click .{{this.options.btnRemoveClass}}': 'remove',
'one:click .message': 'clickMessage'
},
template: function(data) {
return '<div class="' + data.className + '">\
<span class="message">' + data.message + '</span>\
<button class="' + data.btnRemoveClass + '">×</button>\
</div>';
},
clickMessage: function(e) {
console.log($(e.target).text());
}
});
Used to define view types / constructor functions. Define prototype methods for view via object hash. Static properties are optional.
Define initialize function in prototype properties if you need to do some logic on view startup. Will receive all arguments from constructor.
Declare events with object hash or custom function in prototype properties.
events: {
'click .selector': 'handler',
'click {{this.someVariable}}': 'handler', // variable will be injected
'one:submit form': 'oneSubmit', // handler will run only once
'resize window': 'onWindowResize',
'keyup document': 'onDocumentKeyup'
}
Events are delegated to view by default. If you want to bind them directly to elements (to avoid excessive bubbling) set "delegatedEvents" to false.
Adds view instance to sub view registry. This binding enables effective cleanup of container views.
Removes all registered sub views.
Alias for this.$el.find(selector);
Similar to $.when. Resources can be array of deferreds or single deferred. Callbacks are executed with view instance as context.
Removes view from DOM and does cleanup of all bound events.
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)