Backbone View extension for managing subviews.
$ npm install --save vojvoda
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="path/to/vojvoda.js"></script>
<script>
var SomeView = Vojvoda.extend({
// your view logic here
});
</script>
var _ = require('lodash');
var $ = require('jquery');
var Backbone = require('Backbone');
Backbone.$ = $;
var Vojvoda = require('vojvoda')(_, Backbone);
var SomeView = Vojvoda.extend({
// your view logic here
});
Vojvoda creates subViews
namespace inside of Backbone View.
Then by using only 3 methods, you can manipulate subviews without chance for creating memory leaks, ghost views, etc.
This method will create instance of class and add it to namespace.
name
(string) - key of sub view used for adding to namespaceclass
(object) - vojvoda or backbone viewoptions
any type - this will be passed to class for instantiation
var HomePageView = Vojvoda.extend({
initialize: function () {
this.addSubView('gallery', GalleryView, { model: new Backbone.Model(images) });
// this will create instance of GalleryView inside this.subViews
// so if you want to grab it: this.subViews.gallery.doSomething();
}
});
This method will destroy subview and all subviews of that subview recursivly.
name
(string) - key of sub view to destroycontext
(object) - context used internally for recursion
var HomePageView = Vojvoda.extend({
initialize: function () {
this.addSubView('gallery', GalleryView, { model: new Backbone.Model(images) });
},
hide: function () {
this.destroySubView('gallery');
// this will delete gallery from this.subViews
// this will recursivly remove all subviews of gallery
// this will undelegate all events for this view
// this will call 'onDestroy' if it is defined
// this will call 'remove' method of view (by default remove element from DOM)
// this will call 'off' method of view
}
});
This method will destroy all subviews recursivly.
context
(object) - context used internally for recursion
var HomePageView = Vojvoda.extend({
initialize: function () {
this.addSubView('gallery', GalleryView, { model: new Backbone.Model(images) });
this.addSubView('breadcrumbs', BreadCrumbsView, { model: new Backbone.Model(breadcrumbs) });
},
hide: function () {
this.destroyAllSubView();
// this will run destroySubView for each subView
}
});
MIT © Aleksandar Gosevski