Controller - Atileon/OC-p8 GitHub Wiki

Overview

This module takes the Model and View and acts as the controller between them

• @param{object} model The model instance
• @param{object} view The view instance

function Controller(model, view) {
    var self = this;
    self.model = model;
    self.view = view;

    self.view.bind("newTodo", function(title) {
      self.addItem(title);
    });

    self.view.bind("itemEdit", function(item) {
      self.editItem(item.id);
    });

    self.view.bind("itemEditDone", function(item) {
      self.editItemSave(item.id, item.title);
    });

    self.view.bind("itemEditCancel", function(item) {
      self.editItemCancel(item.id);
    });

    self.view.bind("itemRemove", function(item) {
      self.removeItem(item.id);
    });

    self.view.bind("itemToggle", function(item) {
      self.toggleComplete(item.id, item.completed);
    });

    self.view.bind("removeCompleted", function() {
      self.removeCompletedItems();
    });

    self.view.bind("toggleAll", function(status) {
      self.toggleAll(status.completed);
    });
  }

Controller.setView

Loads and initialises the view

• @param{string} '' / 'active' / 'completed'

Controller.prototype.setView = function(locationHash) {
    var route = locationHash.split("/")[1];
    var page = route || "";
    this._updateFilterState(page);
  };

Controller.showAll

An event to fire on load. Will get all items and display them in the todo-list

Controller.prototype.showAll = function() {
    var self = this;
    self.model.read(function(data) {
      self.view.render("showEntries", data);
    });
  };

Controller.showActive

Renders all active tasks

Controller.prototype.showActive = function() {
    var self = this;
    self.model.read({ completed: false }, function(data) {
      self.view.render("showEntries", data);
    });
  };

Controller.showCompleted

Renders all completed tasks

Controller.prototype.showCompleted = function() {
    var self = this;
    self.model.read({ completed: true }, function(data) {
      self.view.render("showEntries", data);
    });
  };

Controller.addItem

An event to fire whenever you want to add in Item. Simply pass in the event object and it'll handle the DOM insertion and saving of the new item.

Controller.prototype.addItem = function(title) {
    var self = this;

    if (title.trim() === "") {
      return;
    }

    self.model.create(title, function() {
      self.view.render("clearNewTodo");
      self._filter(true);
    });
  };

Controller.editItem

Triggers the item editing mode.

Controller.prototype.editItem = function(id) {
    var self = this;
    self.model.read(id, function(data) {
      self.view.render("editItem", { id: id, title: data[0].title });
    });
  };

Controller.editItemSave

Finishes the item editin mode successfully.

Controller.prototype.editItemSave = function(id, title) {
    var self = this;

    //Refactored
    title = title.trim();

    if (title.length !== 0) {
      // console.log(title);
      self.model.update(id, { title: title }, function() {
        self.view.render("editItemDone", { id: id, title: title });
      });
    } else {
      self.removeItem(id);
    }
  };

Controller.editItemCancel

Cancels the item editing mode

Controller.prototype.editItemCancel = function(id) {
    var self = this;
    self.model.read(id, function(data) {
      self.view.render("editItemDone", { id: id, title: data[0].title });
    });
  };

Controller.removeItem

By giving it an ID it'll find the DOM element matching that ID, removeit from the DOM and also remove it from storage.

• @param{number} id The ID of the item to remove from the DOM and storage

 Controller.prototype.removeItem = function(id) {
    var self = this;
  
    self.model.remove(id, function() {
      self.view.render("removeItem", id);
    });

    self._filter();
  };

Controller.removeCompletedItems

Will remove all completed items from the DOM and storage.

Controller.prototype.removeCompletedItems = function() {
    var self = this;
    self.model.read({ completed: true }, function(data) {
      data.forEach(function(item) {
        self.removeItem(item.id);
      });
    });

    self._filter();
  };

Controller.toggleComplete

Give it an ID of a model and a checkbox and it will update the item in storage based on the checkbox's state.

• @param{number} id The ID of the element to complete or uncomplete
• @param{object} checkbox The checkbox to check the state of complete or not
• @param{boolen|undefined} silent Prevent re-filtering the todo items

Controller.prototype.toggleComplete = function(id, completed, silent) {
    var self = this;
    self.model.update(id, { completed: completed }, function() {
      self.view.render("elementComplete", {
        id: id,
        completed: completed
      });
    });

    if (!silent) {
      self._filter();
    }
  };

Controller.toggleAll

Will toggle ALL checkboxes on/off state and completeness of models. Just pass in the event object

Controller.prototype.toggleAll = function(completed) {
    var self = this;
    self.model.read({ completed: !completed }, function(data) {
      data.forEach(function(item) {
        self.toggleComplete(item.id, completed, true);
      });
    });

    self._filter();
  };

Previous < View -------/-------/------- Next > Performance Audit Report