Giter Club home page Giter Club logo

backbone_subviews_vojvoda's Introduction

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, context)

This method will destroy subview and all subviews of that subview recursivly.

  • name (string) - key of sub view to destroy
  • context (object) - context used internally for recursion
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
    }
});

destroyAllSubView(context)

This method will destroy all subviews recursivly.

  • 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.destroyAllSubView();
        // this will run destroySubView for each subView
    }
});

License

MIT © Aleksandar Gosevski

backbone_subviews_vojvoda's People

Contributors

goschevski avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.