A handful of useful JavaScript snippets

_backbone_snippets.js

// Useful Backbone Snippets

add_member.js

   addMember: function (event) {
       event.preventDefault();
       var $form = $(event.currentTarget)
       var formData = $form.serializeJSON();
       var board = Trellino.Boards.getOrFetch(this.model.id);
       board.set({newMemberEmail: formData.group.member})
       
       board.save({}, {
           success: function () {
                $form.find("input[type=text]").val("");
           }
       });
   },

application.js

//
//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require underscore
//= require backbone
//= require bootstrap
//= require trellino
//= require serializeJSON
//= require_tree ../templates
//= require_tree ./models
//= require_tree ./collections
//= require_tree ./views
//= require_tree ./routers
//= require_tree .

associations.js

App.Models.Todo = Backbone.Model.extend({
  urlRoot: "/api/todos",

  comments: function () {
    this._comments = this._comments ||
      new App.Collections.TodoComments([], { todo: this });
    return this._comments;
  },

  parse: function (payload) {
    if (payload.comments) {
      // We can get away without `{ parse: true }` here, but it is
      // common to put it in. Using the `parse` option will ensure
      // that the Comment JSON is passed to `Comment#parse`, which
      // will ensure that data even further nested inside a comment
      // will be parsed.
      //
      // As a rule, inside the `parse` method, pass `{ parse: true }`
      // to methods that build more objects.
      this.comments().set(payload.comments, { parse: true });
      delete payload.comments;
    }

    return payload;
  }
});

composite_view.js

Backbone.CompositeView = Backbone.View.extend({
    addSubview: function (selector, subview) {
        var selectorSubviews = 
        this.subviews()[selector] || (this.subviews()[selector] = []);
        
        selectorSubviews.push(subview);
        var $selectorEl = this.$(selector);
        $selectorEl.append(subview.$el);
    },
    
    renderSubviews: function () {
        var view = this;
        _(this.subviews()).each (function (selectorSubviews, selector) {
            var $selectorEl = view.$(selector).empty();
            _(selectorSubviews).each (function (subview) {
                $selectorEl.append(subview.render().$el);
                subview.delegateEvents();
            });
        });
    },
    
    remove: function () {
       Backbone.View.remove.prototype.call(this);
       _(this.subviews).each ( function (selectorSubviews, selector) {
           _(selectorSubview).each (function (subview) {
               subview.remove();
           });
       }) ;
    },
    
    removeSubview: function (selector, subview) {
        var selectorSubviews = 
        this.subviews()[selector] || (this.subviews()[selector] = []);
        
        var subviewIndex = selectorSubviews.indexOf(subview);
        selectorSubviews.splice(subviewIndex, 1);
        subview.remove();
    },
    
   subviews: function () {
       if (!this._subviews) {
           this._subviews = {};
       }
       return this._subviews;
   },
});

getOrFetch.js

    // In collection
    getOrFetch: function (id) {
        var todos = this;

        var todo;
        if (todo = this.get(id)) {
            todo.fetch();
        } else {
            todo = new App.Models.Todo({ id: id });
            todo.fetch({
                success: function () { todos.add(todo); }
            });
        }

        return todo;  
    },

sub_view_leave.js

// Leave and stop listening to subviews in backbone
// subview
BackboneExample.Views.ExampleItem = Backbone.View.extend({
  tagName: 'li',
  template: JST['examples/item'],
  render: function () {
    var content = this.template({ example: this.model });
    this.$el.html(content);
    return this;
  },
  leave: function () {
    this.remove();
  }
});
// composite view
BackboneExample.Views.ExamplesIndex = Backbone.View.extend({
  tagName: 'ul',
  template: JST['examples/index'],
  initialize: function (attribute) {
    this.subViews = [];
  },
  render: function () {
    var content = this.template();
    this.$el.html(content);
    var that = this;
    this.collection.each(function (example) {
      var view = new BackboneExample.Views.ExampleItem({ model: example });
      that.subViews.push(view);
      that.$el.append(view.render().$el);
    });
    return this;
  },
  leave: function () {
    this.subViews.forEach(function (subView) {
      subView.leave();
    });
    this.remove();
  }
});

swap_view.js

_swapView: function (view) {
  this._currentView && this._currentView.remove();
  this._currentView = view;
  this.$rootEl.html(view.render().$el);
}