Models & Collections

Here we are going to set the standard methods which go into all models. These methods will allow for basic CRUD functionality to exist without having to make up new methodology each time.

To Note: Model = /GET/:id & /PUT/:id, Collection = POST & /GET

TL;DR = Events to use:

Collection:

"modelName:save", "modelName:save:success"

Model:

"modelName:fetch", "modelName:fetch:success"
"modelName:update", "modelName:save:success"

Here is an example model with the example methods:

var ProjectModel = Backbone.Model.extend({

    defaults: {
      title       : null,
      description : null,
      archived    : false
    },

    initialize: function () {
      // GET, and PUT
      // NOTE: Create is not here (POST) because that happens on the
      // Collection level.
      this.initializeProjectFetchListener();
      this.initializeProjectUpdateListener();
    },

    // Standard URLRoot for REST API.
    urlRoot: '/project',

    initializeProjectFetchListener: function () {
      var self = this;

      // With this now we can call project:model:fetch and pass
      // in the ID, and automatically get back the attrs for that project model.
      this.listenTo(this, "project:model:fetch", function (id) {
        self.get(id);
      });
    },

    initializeProjectUpdateListener: function () {
      var self = this;

      // With this we can call this event, and pass in the formData
      // in the form of var data = { title: $(".title").val(), other: '..' }
      // And it will handle the rest.  The only critical factor here is that the
      // passed in data must match the database schema.
      this.listenTo(this, "project:model:update", function (data) {
        self.update(data);
      });
    },

    update: function (data) {
      var self = this;

      this.save({
        title: data['title'],
        description: data['description']
      }, { success: function () {
          // This allows us to expect this event on the front-end
          // view layer and on update of this event, update the DOM.
          // In this case we don't need to return the model through the
          // event to the DOM, because update is just a PUT on an existing model.
          self.trigger("project:save:success");
        }
      });
    },

    get: function (id) {
      var self = this;

      // NOTE: Using the UrlRoot allows us to pass in an ID to fetch
      // individual models.
      this.fetch({ id: id,
        success: function (data) {
          self.trigger("project:model:fetch:success", data);
        }
      })
    }

Here is an example Collection:

var ProjectsCollection = Backbone.Collection.extend({

    model: ProjectModel,

    url: '/project/findAll',

    parse: function (response) {
      return response.projects;
    },

    initialize: function () {
      var self = this;

      this.listenTo(this, "project:save", function (data) {
        // Create model instance with data being passed in from UI
        var project = new ProjectModel({ title: data['title'], description: data['description'] })

        // Add the model instance to the collection
        self.add(project);

        // For each model within the collection, go through and persist to server
        self.models.forEach(function (model) {
          model.save();
        });

        // Trigger standardized success message to update DOM.
        self.trigger("project:save:success");
      });

    }

  });

---

TODO:

• Experiment with putting these methods on a base_model, and base_collection and then extend off of it. There are some problems with contextualizing that though (IE: this, self, etc).