Backbone SPA

README.md

#Single Page Application ###RequireJS, BackboneJS, Jquery

init.js

var Frigate;
require.config({
  paths: {
    text: '/vendor/requirejs-text/text.js',
    jquery: '/vendor/jquery/jquery.min',
    underscore: '/vendor/underscore/underscore-min',
    backbone: '/vendor/backbone/backbone-min',
    bootstrap: '/vendor/bootstrap/dist/js/bootstrap.min',
    socketio: '/vendor/socket.io-client/socket.io',
    templates: '/templates'
  },
  wrapShim: true,
  shim: {
    jquery: {
      exports: '$, jQuery'
    },
    underscore: {
      exports: '_'
    },
    backbone: {
      exports: 'Backbone',
      deps: ['jquery', 'underscore']
    },
    bootstrap: {
      exports: 'Bootstrap',
      deps: ['jquery']
    },
    socketio: {
      exports: 'io'
    }
  }
});

// Main.js
define(['jquery', 'underscore', 'backbone', 'bootstrap', 'socketio'],
  function($, _, Backbone, Bootstrap, io) {
    $ = $.noConflict(true), _ = _.noConflict(), Backbone = Backbone.noConflict();
    if (!window.$ && !window.jQuery) {
      window.$ = window.jQuery = $;
    };
    if (!window._) {
      window._ = _;
    };
    if (!window.io) {
      window.io = io;
    };
    if (!window.Backbone) {
      window.Backbone = Backbone;
    }
    var $ = window.$,
      _ = window._,
      JSON = window.JSON,
      Backbone = window.Backbone,
      console = window.console = window.console || {
        log: function() {}
      };
    app();
    return {
      $: $,
      _: _,
      Backbone: Backbone,
      Bootstrap: Bootstrap,
    };
    var notesCollection;

    function app() {
      var $ = window.$,
        _ = window._,
        JSON = window.JSON,
        Backbone = window.Backbone,
        console = window.console = window.console || {
          log: function() {}
        },
        App;

      App = (function() {
        var config = {
          debug: true,
          root: ".main"
        },
          log = function() {
            if (config.debug) {
              console.log(arguments);
            }
          };

        return {
          config: config,
          views: {},
          localStorage: {},
          //		init: init,
          //		main: main,
          log: log,
          collections: {},
          models: {},
          utils: {}
        };
      }());

      if (App.config.debug) {
        Frigate = window.Frigate = window.Frigate || {},
        Frigate = App;
      }

      Frigate.models.Template = Backbone.Model.extend();

      Frigate.collections.Templates = Backbone.Collection.extend({
        initialize: function() {
          if (this.model) {
            this.on("change", this.log(this));
          }
        },
        log: function(template_desc) {
          //		App.log('template_desc: ', template_desc)
        },
        parse: function(response) {
          var models = [];
          if (response) {
            _.each(response, function(i) {
              models.push(i);
            });
          }
          return models;
        },
        url: '/api/templates',
        model: Frigate.models.Template,
        delTemplate: function(id) {
          if (id) {
            return console.log("delTemplate init")
          }

        }
      });

      Frigate.models.Note = Backbone.Model.extend({
        idAttribute: "note_id"
      });
      Frigate.collections.Notes = Backbone.Collection.extend({
        initialize: function(options) {
          //this.fetch({cache: true});
        },
        model: Frigate.models.Note,
        url: '/api/notes'
      });

      Frigate.views.Body = Backbone.View.extend({
        initialize: function(options) {
          //	App.log('Views.Body.init()', this);
          var messages = [];

          var socket = io.connect('http://localhost:3000');
          socket.emit('requestName');
          socket.on('message', function(data) {
            //console.log(data);
          });
        },
        el: 'body'
      });

      Frigate.views.Main = Backbone.View.extend({
        initialize: function() {
          var that = this;
          //		App.log('Views.Main.init()', this);
          var templatesCollection = {};
          if (!templatesCollection) {
            templatesCollection = new Frigate.collections.Templates();
          }
          templatesCollection = new Frigate.collections.Templates();

          templatesCollection.fetch({
            success: function(rsp) {
              that.render(rsp.findWhere({
                'template_title': "Main"
              }));
            }
          });
        },
        el: '.main',
        render: function(options) {
          $('.main').empty();
          $('.main').empty().hide().append(options.attributes.template_content).fadeIn();
        }
      });

      Frigate.views.Notes = Backbone.View.extend({
        initialize: function() {
          var that = this;
          //	App.log('Views.Notes.init()', this);
          var templatesCollection;
          if (!templatesCollection) {
            templatesCollection = new Frigate.collections.Templates();
          }
          templatesCollection.fetch({
            success: function(rsp) {
              that.render(rsp.findWhere({
                'template_title': "Notes"
              }));
            }
          });
          this.populateNotes();
        },
        el: '.main',
        events: {
          'click 	.selectNote': 'selectNote'
        },
        populateNotes: function() {
          var that = this
          if (!notesCollection) {
            notesCollection = new Frigate.collections.Notes();
          }
          notesCollection.fetch({
            success: function(rsp) {
              _.each(rsp.models, function(i) {
                $('.notes tbody').append('<tr>' +
                  '<td id="' + i.attributes.note_id + '" class="selectNote">' +
                  '<div class="selectNote-title">' + i.attributes.note_title + '</div>' +
                  '<div class="selectNote-date">' + i.attributes.note_date + '</div>' +
                  '<div class="selectNote-desc">' + i.attributes.note_content + '</div>' +
                  '</td></tr>')
              });

              //	that.render(rsp);
            }
          });
        },
        selectNote: function(e) {
          var note = notesCollection.get({
            'note_id': e.currentTarget.id
          });
          // $("#note_content_editor").on('change keyup paste', function() {
          //
          // });
          $('#note_title_editor').text(note.attributes.note_title)
          $('textarea#note_content_editor').val(note.attributes.note_content)

        },
        render: function(template) {
          $('.main').empty();
          $('.main').empty().hide().append(template.attributes.template_content).fadeIn();
        }
      });


      Frigate.router = Backbone.Router.extend({
        initialize: function(options) {
          //	App.log('Router.init(',arguments,');');
          App.router = router = this;
          Backbone.history.start({
            root: location.pathname
          });
          new Frigate.views.Body({
            el: 'body'
          });

        },
        routes: {
          '': 'index',
          'notes': 'notes',
        },
        index: function() {
          var main;
          if (!main) {
            main = new Frigate.views.Main();
          }
        },
        notes: function() {
          var notes;
          if (!notes) {
            notes = new Frigate.views.Notes();
          }
          //new Frigate.views.Notes();
        },
        defaultAction: function() {
          //App.log('Router.defaultAction(', arguments, ');');
          App.router.navigate('#', {
            trigger: true,
            replace: true
          });
        }
      });
      new Frigate.router();




    };

  });