Refactor 5 - Backbone Models, Collections

refactor-05-ajax-vs-backbone.js

// -------------------------------------
// hand-written ajax
// -------------------------------------

var PageOneView = Backbone.View.extend({

    el: '#pageOneMainContainer',

    initialize: function() {
        this.getSomeData();
    },

    getSomeData: function() {
        var self = this;
        $.ajax({
            type: 'GET',
            url: 'SomeEndpoint',
            data: formData,
            dataType: 'json',
            success: function(data, textStatus, jqXHR) {
                self.displayResults(data);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                self.displayError();
            }
        });
    },

    displayResults: function(data) {
    },

    displayError: function() {
    }

});



// -------------------------------------
// using Backbone
// -------------------------------------

// initialize view
var pageOneView = new PageOneView({
    collection: new PageOneCollection([]),
});

var PageOneView = Backbone.View.extend({

    el: '#pageOneMainContainer',

    template: _.template($('#page-one-template').html()),

    initialize: function() {},

    render: function() {
        this.$el.html(this.template({'collection': this.collection}));
        // maintain chainability
        return this;
    }

});

var PageOneCollection = Backbone.Collection.extend({

    initialize: function(models, options) {},

    model: PageOneModel,

    // RESTful web service URL
    url: '/SomeEndpoint'

});