[ Web Proxy ]
URL:
Viewing: https://raw.githubusercontent.com/ianqueue/Backbone.JS-Example/master/js/editor.js [Back]  [Original]

// load the application once the DOM is ready
$(function(){


    // -- Question Collection (History)

    var questionHistory = new(Backbone.Collection.extend({

        model: Question,  // a collection of question Model objects

        initialize: function() {
            this.records = this.localStorage.records;

            this.bind('add', function() {
                console.dir( this.localStorage.findAll() );
                console.log( this.localStorage );
            }, this);
        },

        localStorage: new Store( 'questionHistory' ), // our localStorage object reference

        // grab the current question object or the nth order question in the queue
        getCurrent: function( order ) {
            if ( order ) {
                return this.localStorage.findAll()[ order - 1 ];
            } else {
                var allQuestions = this.localStorage.findAll();
                return ( this.current ) ? this.current : allQuestions[ allQuestions.length - 1 ];
            }
        },

        // get the next order number in the collection history
        nextOrder: function() {
            if (!this.records.length) return 0;
            return this.records.length;
        },

        // get the previous question model to the current question in the collection
        previous: function( question ) {
            this.current = this.localStorage.findAll()[ question.order - 1 ];
            return this.current;
        }

    }));


    // -- Question Model

    var Question = new Backbone.Model.extend({

        // default attributes for a question content item
        defaults: function() {
            return {
                text  : '',
                order : questionHistory.nextOrder()
            };
        }
    });


    // -- Editor View

    var EditorView = new(Backbone.View.extend({

        el: $("#questionEditor"),                   // common practice to tie a Backbone.View to an el (how the widget comes together)

        collection: questionHistory,                // tie in our collection for reference

        //
        template: function(data) {
            return Mustache.render($('#question-template').html(), data);
        },

        //
        events: {
            'click .store-question'    : 'storeQuestion',
            'keyup #editor-input'      : 'showTooltip',
            'click .previous-question' : 'renderPrevious'
        },

        //
        initialize: function() {
            this.input = this.$("#editor-input");

            this.collection.bind('add', this.renderCurrent, this);
        },

        renderCurrent: function( order ) {          //console.log('Backbone.View.renderCurrent()');


            if( $.type(order) === 'string' ) {
                var currentQuestion = questionHistory.getCurrent( order );
            } else {
                var currentQuestion = questionHistory.getCurrent();
            }

            $('#questionContent').html( this.template( currentQuestion ) );
        },

        renderPrevious: function() {                //console.log('renderPrevious()');
            var currentQuestion  = questionHistory.getCurrent();
            var previousQuestion = questionHistory.previous( currentQuestion );

            $('#questionContent').html( this.template( previousQuestion ) );
        },

        //
        storeQuestion: function() {                 //console.log('Backbone.View.storeQuestion()');
            var text = this.input.val();
            if ( !text ) return;

            questionHistory.create({
                text  : text,
                order : questionHistory.nextOrder()
            });

        },

        //
        showTooltip: function(e) {
            /*
            var tooltip = $(".ui-tooltip-top");
            var val = this.input.val();
            tooltip.fadeOut();
            if (this.tooltipTimeout) {
                clearTimeout(this.tooltipTimeout);
            }

            if (val == '' || val == this.input.attr('placeholder')) return;

            var show = function() {
                tooltip.show().fadeIn();
            };
         this.tooltipTimeout = _.delay(show, 1000);
            */
        }

    }));


    // -- Editor Router

    var EditorRouter = new(Backbone.Router.extend({

        routes: {
            'editor'           : 'editor',  // #editor    // event: 'route:editor'
            'editor/v:version' : 'editor'   // #editor/v7 // event: 'route:editor'
        },

        // /editor and /editor/v# routes call render in the view
        editor: function( version ) {

            EditorView.renderCurrent( version );
        }

    }));

    // start monitoring hashchange events & dispatching routes
    Backbone.history.start();
});

Web Proxy Viewer  |  New URL  |  Original Page