document.js

 define([
    "app",

    //modules
    "modules/document/views"
],

function(app, Views) {

    var Document = app.module();

    // Document Folder Tree
    // --------------------

    Document.FolderTree = Backbone.Model.extend({
        url: app.root + 'folders'
    });

    // Document Tag list
    // -----------------
    
    Document.TagListItem = Backbone.Model.extend({
        validate: function(attrs) {
            if (attrs.name === '') {
                return "The tag must have a name";
            }
        }
    });

    Document.TagList = Backbone.Collection.extend({
        url: app.root + 'tags'
       // model: Document.TagListItem
    });

    // Documents
    // ---------

    Document.Model = Backbone.Model.extend({});

    Document.Collection = Backbone.Collection.extend({
        url: app.root + 'documents', 
        model: Document.Model,

        fetch: function(options) {
            if (this.folderId !== "null") {
                this.url = app.root + 'documents/' + this.folderId;
            } else {
                this.url = app.root + 'documents';
            }
            this.invokeSuper('fetch', options);
        }
    });

    // Document Preview
    // ----------------

    Document.Preview = Backbone.Model.extend({
        defaults: {
            'empty': 'true'
        }
    });

    Document.Views = Views;

    return Document;
});

router.js

define([
    // Global
    "app",

    // modules
    "modules/document/document",
    "modules/header/header",
    "modules/biller/biller",
    "modules/userbiller/userbiller",
    "modules/account/account",
    "modules/user/user"
],

function(app, Document, Header, Biller, UserBiller, Account, User) {

    // For DEBUGGING
    window.app = app;
    window.Account = Account;
    window.User = User;

    // Defining the application router, you can attach sub routers here.
    var Router = Backbone.Router.extend({
        routes: {
            "app": "app"
        },

        app: function() {

            // Create Collection/Model Instances
            // ---------------------------------

            // serverData is a global embedded in from Express
            var user = app.models.user = new User.Model(
                // correct for the fact that user table in db doesn't
                // have a "username" field
                _.extend(serverData.user, {
                    username: serverData.user.email,
                    postalcode: serverData.user.postcode
                })
            );
            var documents = app.models.documents = new Document.Collection();
            var billers = app.models.billers = new Biller.Collection();
            var userBillers = app.models.userBillers = new UserBiller.Collection();
            var accounts = app.models.accounts = new Account.Collection();
            
            var folder_tree = app.models.folder_tree = new Document.FolderTree();
            var tag_list = app.models.tag_list = new Document.TagList();

            // Create Main Layout
            // ------------------

            var main = app.useLayout('main', {className: 'container'});

            // Set all the views.
            main.insertViews({
                '#header': new Header.Views.Header(),
                '#document-nav': [
                    new Document.Views.FolderTree({model: folder_tree}),
                    new Document.Views.TagList({collection: tag_list})
                ],
                '#documents': [
                    new Document.Views.List({collection: documents}),
                    new Document.Views.Preview({model: new Document.Preview()})
                ]
            });

            // Fetch Data from Server
            // ----------------------

            // getting documents in root folder (i.e. 'null')
            app.trigger('getFolder', 'null');

            // get account info
            billers.fetch();
            accounts.fetch();
            userBillers.fetch();

            // get user folders and tags
            folder_tree.fetch();

            tag_list.fetch().done(function() {
                console.log('here');
            });
        }
    });

    return Router;

});

views.js

define([
    "app",

    // Modules
    "modules/biller/biller",
],
function(app, Biller) {

    var Views = {};

    // Document Folder Tree
    // -------------------

    Views.FolderTree = Backbone.View.extend({
        template: "document/foldertree",
        id: "document-foldertree",

        events: {
            "click a": "getFolder"
        },

        initialize: function() {
            this.model.on('change', this.render, this);
        },

        serialize: function() {
            var model = {};
            model.tree = this.model.attributes;
            return model;
        },

        getFolder: function(e) {
            var id;
            e.preventDefault();
            id = $(e.target).attr('href');
            app.trigger('getFolder', id);
        }
    });

    // Document Tag List
    // -----------------

    Views.TagList = Backbone.View.extend({
        template: "document/taglist",
        id: "document-taglist",

        events: {
            // "click label": "getDocs",
            // "dblclick label": "enterEditTagMode",
            // "click #new-tag": "newTag",
            // "keyup": "handleKeyStrokes"
        },

        initialize: function() {
            this.collection.on('reset', function() {
                console.log('here')
                this.render
            }, this);
        },

        render: function(manage) {
            // Iterate over the passed collection and create a view for each item.
            this.collection.each(function(model) {
                
                // Pass the document model data to the new Tag List Item View.
                this.insertView(
                    "#tag-list",
                    new Views.TagListItem({
                        model: model
                    })
                );
            }, this);

            return manage(this).render();
        }

        // getDocs: function(e) {
        //     var id;
        //     e.preventDefault();
        //     // id = $(e.target).attr('href');
        //     // app.trigger('getFolder', id);
        //     //console.log('here');
        // },

        // newTag: function(e) {
        //     var model;
        //     this.collection.add({name: ''}, {at: 0});
        //     model = this.collection.at(0);
        //     model.save();
        //     console.log(model.url());
        //     console.log(model);
        // },

        // enterEditTagMode: function(e) {
        //     var $target = $(e.target);
        //     var self = this;
        //     e.preventDefault();

        //     // handle the case where the user clicks anywhere on the screen to exit edit-tag mode
        //     $('body').on('click.exitEditTagMode', function(e) {
        //         // dont exit edit mode if the user click on the input field that they are editing
        //         if ($(e.target).hasClass('edit-tag-name')) return;

        //         self.exitEditTagMode();
        //     });

        //     // hide label & show input box
        //     $target.hide().next('input').show().focus();
            
        // },

        // exitEditTagMode: function() {
        //     // only hijack global clicks to exit edit-tag mode when the user is actually IN edit-tag mode
        //     $('body').unbind('click.exitEditTagMode');
        //     this.$('input:visible').hide().prev('label').show();
        // },

        // updateTag: function(el) {
        //     var id = $(el).data('tid');
        //     var name = $(el).val();
        //     var model = this.collection.get(id);
        //     model.save({name: name});
        // },

        // handleKeyStrokes: function(e) {
        //     var key = event.which || event.keyCode;
        //     switch(key) {
        //     // ESC
        //     case 27:
        //         this.exitEditTagMode();
        //         break;
        //     // ENTER
        //     case 13:
        //         this.exitEditTagMode();
        //         this.updateTag(e.target);
        //         break;
        //     }
        // }
    });

    // Tag List Item
    // -------------

    Views.TagListItem = Backbone.View.extend({
        template: "document/taglistitem",
        tagName: "li",

        serialize: function() {
           // console.log(this.model.toJSON());
            return {hi: 'bye'}
        }

    });

    // Documents - Documents List
    // --------------------------

    Views.List = Backbone.View.extend({
        template: "document/list",
        className: "span4",
        tagName: "section",
        id: "document-list",

        documentOffsetLength: 15,

        initialize: function() {
            var self = this;

            /*** Load Initial Batch of Documents ***/

            // fetch inital batch
            app.on('getFolder', function(id){
                self.collection.folderId = id;
                self.collection.fetch();
            });

            // render inital batch
            this.collection.on('reset', function() {
                var rendering_list_view = self.render();

                // initialize infinite scroll when the list view is done rendering
                rendering_list_view.done(function() {
                    self.initInfiniteScroll();
                });
            });

            /*** Load Subsequent Batches ***/

            // manually fetch next batch (ie. with a 'Load More' button)
            app.on('loadMore', function() {
                // invoke infiniteScroll's scroll event handler with the true option to manually trigger document fetching
                self.getInfiniteScroll('target').trigger('scroll', true); 
            });

            // render next batch when new models are added to the collection
            this.collection.on('add', function(model) {
                self.insertView(
                    "#document-items",
                    new Views.ListItem({
                        model: model
                    })
                ).render();
            });
        },

        render: function(manage) {
            // Iterate over the passed collection and create a view for each item.
            this.collection.each(function(model) {
                // Pass the document model data to the new Document Item View.
                this.insertView(
                    "#document-items",
                    new Views.ListItem({
                        model: model
                    })
                );
            }, this);

            // You still must return this view to render, works identical to
            // existing functionality.
            return manage(this).render();
        },

        // initialize infinite scrolling for this collection of documents
        initInfiniteScroll: function() {
            var $document_items = $('#document-items');
            var spinner_el = '<img id="infinte-scroll-spinner" src="assets/images/ajax-loader.gif" alt="" width="35" height="35">';
            var onFetch = function() {
                $document_items.append(spinner_el);
            };
            var success = function() {
                $('#infinte-scroll-spinner').remove();
            };

            this.infiniScroll = new Backbone.InfiniScroll(this.collection, {
                success: success,
                onFetch: onFetch,
                target: this.$('.overflow-scroll'),
                includePage: true,
                documentOffsetLength: this.documentOffsetLength,
                scrollOffset: 100
            });
        },

        // return the infiniScroll object, or return a property in the infiniScroll's options
        getInfiniteScroll: function(prop) {
            var infiniScroll = this.infiniScroll;
            if (!infiniScroll) return false;
            return prop ? infiniScroll.options[prop] : infiniScroll;
        }
    });

    // Documents List Item - Individual Document View
    // ----------------------------------------------

    Views.ListItem = Backbone.View.extend({
        template: 'document/listItem',

        events: {
            'click': 'showPreview'
        },

        initialize: function() {
            var baseUrl = app.root;
            var username = app.models.user.get('username');
            var password = app.models.user.get('password');
            
            this.pdfUrl = baseUrl + 'examine/' + this.model.get('resource') + '?format=PDF';
            this.pdfThumbUrl = baseUrl + 'preview/' + this.model.get('resource') + '.sec';
            
        },

        serialize: function() {
            return _.extend(this.model.toJSON(), {
                pdf_url: this.pdfUrl
            });
        },

        showPreview: function(e) {
            e.preventDefault();
            app.trigger('showPreview', this.model);
        }
    });

    // Document Preview
    // ----------------

    Views.Preview = Backbone.View.extend({
        template: "document/preview",
        className: "span6",
        tagName: "section",
        id: "document-preview",

        initialize: function() {
            var self = this;

            // update document preview model with new document data
            app.on('showPreview', function(model) {
                self.model = model;
                self.render();
            });
        },

        serialize: function() {
            return this.model.toJSON();
        }
    });

    return Views;

});