SPA todo app III, not handle db parts yet

task_flux.js

/**
 * Take Flux concept
 *
 * the DOM has been localized and the user sees it in their language.
 *
 * @class Main
 */
(function(exports) {
  'use strict';

  function pages() {
    this.page = 'view';    
  };
  
  pages.prototype = {
    put: function p_put(data) {
      if (data) {
        this.page = data;
        window.dispatchEvent(new CustomEvent('change_page'));
      }
    }
  };

  exports.pages = pages;
}(window));

(function() {
  'use strict';

  var CRUD = function() {
    var DBNAME = 'crud';
    var elements = {};
  };

  CRUD.prototype = {
    init: function c_init() {
      this.name = 'crud';
      this.elements = {
        goEdit: document.querySelector('#edit'),
        goView: document.querySelector('#view'),
        taskList: document.querySelector('#tasklist'),
        content: document.querySelector('#content'),
        taskPanel: document.querySelector('#task_panel'),
        taskInput: document.querySelector('#task_input'),
        submit: document.querySelector('#submit')
      };
      // view actions
      this.elements.goView.addEventListener('click', this);
      this.elements.goEdit.addEventListener('click', this);
      this.elements.submit.addEventListener('click', this);
      this.elements.taskInput.addEventListener('keydown', this);
      // store actions
      window.addEventListener('change_page', this);
      // register store
      this.store = new pages();
      this.store.put('view');
    },
    
    // dispatcher
    handleEvent: function c_handleEvent(evt) {
      switch (evt.type) {
        // view actions
        case 'click':
          evt.preventDefault();
          switch (evt.target.id) {
            case 'view':
//              this.showPage('view');
              this.store.put('view');
              break;
            case 'edit':
//              this.showPage('edit');
              this.store.put('edit');
              break;
            case 'submit':
              this.insertItem();
              break;
          }
          break;
        case 'keydown':
          evt.preventDefault();
          if (evt.keyCode === 13) {
            this.insertItem();
          }
          break;
        // model actions
        case 'change_page':
          this.showPage(this.store.page);
          break;
        default:
          break;
      }
    },

    showPage: function c_showPage(page) {console.log(page);
      switch(page) {
        case 'edit':
          this.elements.goView.hidden = false;
          this.elements.goEdit.hidden = true;
          this.elements.taskPanel.hidden = true;
          this.listItems('edit');
          break;
        case 'view':
        default:
          this.elements.goView.hidden = true;
          this.elements.goEdit.hidden = false;
          this.elements.taskPanel.hidden = false;
          this.listItems('view');
          break;
      }
    },

    // create fragment, append to taskList
    renderList: function c_renderList(type, data) {
      this.elements.taskList.innerHTML = '';
      data.forEach(function(item) {
        console.log(item.item);
        var li = document.createElement('li');
        if (type === 'view') {
          li.textContent = item.item;
        } else {
          li.innerHTML = item.item + ' <a href="#" data-id=' + item._id + '>x</a>';
          li.addEventListener('click', function(evt) {
            evt.preventDefault();
            evt.stopPropagation();
            this.removeItem(evt.target.dataset.id);
          }.bind(this));
        }
        this.elements.taskList.appendChild(li);
      }.bind(this));
    },

    listItems: function c_listContent(type) {
      indexed(this.DBNAME).create();
      var promise = this.getItems();
      promise.then(function(data) {
        this.renderList(type, data);
      }.bind(this));
    },

    getItems: function c_getItems() {
      var self = this;
      return new Promise(function(resolve, reject) {
        indexed(self.DBNAME).find(function (err, data) {
          if (err) {
            console.log('Nope.');
          } else {
            resolve(data);
          }
        });
      });
    },

    getItem: function c_getItem(id) {
      indexed(this.DBNAME).find({
        _id: id
      }, function (err, data) {
        if (err) {
          console.log('Nope.');
        } else {
          console.log(data);
        }
      });
    },

    insertItem: function c_insertItem() {
      var content = this.elements.taskInput.value;
      var now = new Date();
      if (content.length > 0) {
        indexed(this.DBNAME).insert({
          item: content,
        }, function (err, data) {
          if (err) {
            console.log('Nope.');
          } else {
            console.log(data);
          }
        });
      }
      this.elements.taskInput.value = '';
      this.listItems('view');
    },

    updateItem: function c_updateItem(id, item) {
      indexed(this.DBNAME).update({
        _id: id
      }, {
        item: item
      }, function (err, data) {
        // Handle response...
        this.listItems('view');
      });
    },

    removeItem: function c_removeItem(id) {
      indexed(this.DBNAME).delete({
        _id: id
      }, function (err, data) {
        // Handle response...
        this.listItems('edit');
      }.bind(this));
    },

    resetItems: function c_resetItems() {
      indexed(this.DBNAME).drop();
    }
  }

  document.addEventListener('DocumentLocalized', function() {
    document.body.classList.remove('hidden');
      var crud = new CRUD();
      crud.init();
  });
}());