Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vojvoda Build Status

Backbone View extension for managing subviews.

Install

$ npm install --save vojvoda

Usage

Browser

<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>

Browserify

var _ = require('lodash');
var $ = require('jquery');
var Backbone = require('Backbone');
Backbone.$ = $;
var Vojvoda = require('vojvoda')(_, Backbone);

var SomeView = Vojvoda.extend({
    // your view logic here
});

API

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.

addSubView(name, class, options)

This method will create instance of class and add it to namespace.

  • name (string) - key of sub view used for adding to namespace
  • class (object) - vojvoda or backbone view
  • options any type - this will be passed to class for instantiation
Example:
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();
    }
});

destroySubView(name, options)

This method will destroy subview and all nested subviews recursivly.

  • name (string) - key of sub view to destroy
  • options (object) - options (defaults: { remove: true, beforeEachDestroy: _.noop })
Example:
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
    }
});

destroyAllSubViews(options, context)

This method will destroy all subviews recursivly.

  • options (object) - options (defaults: { remove: true, beforeEachDestroy: _.noop })
  • context (object) - context used internally for recursion
Example:
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.destroyAllSubViews();
        // this will run destroySubView for each subView
    }
});

Options for destroySubView and destroyAllSubViews

  • remove: true - if you pass false, vojvoda will not execute remove method
  • beforeEachDestroy: _.noop - function will be executed before each destroySubView where argument is subview

License

MIT © Aleksandar Gosevski

About

Backbone View extension for managing subviews

Topics

Resources

License

Packages

No packages published