Controller - Atileon/OC-p8 Wiki

Overview

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

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

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.

 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.

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