load more command pattern

load-more-command-pattern.js

// ----------------------------------------------------------------------------- command

define('command', ['underscore', 'backbone'], function(_, Backbone) {

    var Command = function() {};

    Command.prototype = _.extend({}, Backbone.Event, {

        ALWAYS: 'always.command',
        DONE: 'done.command',
        FAIL: 'fail.command',

        execute: function() {
            Backbone.$.get(this.url)
                .always(this.onAlways.bind(this))
                .done(this.onDone.bind(this))
                .fail(this.onFail.bind(this));
        },

        onAlways: function () {
            this.trigger(this.ALWAYS,this);
        },

        onDone: function(result) {
            this.result = result;
            this.trigger(this.DONE,this);
        },

        onFail: function(result) {
            this.result = result;
            this.trigger(this.FAIL,this);
        }

    });

    return Command;

});

// ----------------------------------------------------------------------------- command invoker

define('commandInvoker', ['bui/mvc'], function(mvc) {

    var CommandInvoker = mvc.View.extend({

        events: {
            'click': 'onClicked'
        },

        initialize: function(options) {
            // this.spinner = options.spinner; // spinner should really be another view component 
            this.command = options.command;
            this.command.url = this.el.href;
            this.command.on(this.command.ALWAYS,this.onCommandStarted, this);
            this.command.on(this.command.DONE,this.onCommandDone, this);
            this.command.on(this.command.FAIL,this.onCommandFailed, this);
        },

        onClicked: function() {
            this.command.execute();
        },

        onCommandStarted: function() {
            this.$el.hide();
            // show spinner
        },

        onCommandDone: function() {
            this.$el.hide();
            // hide spinner
            // probably want to remove the click event listener and destroy the command
        },

        onCommandFailed: function() {
            this.$el.show();
            // hide spinner
        }

    });

    return CommandInvoker;

});

// ----------------------------------------------------------------------------- command receiver

define('commandReceiver', ['bui/mvc'], function(mvc) {

    var CommandReceiver = mvc.View.extend({

        initialize: function(options) {
            this.command = options.command;
            this.command.on(this.command.ALWAYS,this.onCommandStarted, this);
            this.command.on(this.command.DONE,this.onCommandDone, this);
            this.command.on(this.command.FAIL,this.onCommandFailed, this);
        },

        onCommandStarted: function() {
        },

        onCommandDone: function(command) {
            this.$el.html(command.result);
        },

        onCommandFailed: function() {
        }

    });

    return CommandReceiver;

});

// ----------------------------------------------------------------------------- implementation

var command = new Command();
var button = new CommandInvoker({el:'.button', command: command});
var articleListing = new CommandReceiver({el:'.listing',command: command});