VM/Controller in Mithril Discussion

vm-controller-distinction.js

// some model holding data state
class TodoItem {
  constructor() {
    this.isAchieved = m.prop(false);
  }
}

// vm holds application state -- http://lhorie.github.io/mithril-blog/what-is-a-view-model.html
class TodoVM extends SomeEventEmitter {
  constructor() {
    this.isClicked = m.prop(false);
  }
}

// controller defines api communication, model instantiation, etc.
class BaseController {
  constructor() {
    this.todos = m.prop([]);
    m.request({
      url: '/api/todo-list/',
      type: TodoItem
    }).then(this.todos);
    this.vm = new TodoVM();
  }
}

// controller can differ between contexts
class PremiumController extends BaseController {
  constructor() {
    super();
    this.vm.on('click', () => {
      this.vm.isClicked(true);
      alert('hey, you are premium');
    });
  }
}

class NormalController extends BaseController {
  constructor() {
    super();
    this.vm.on('click', () => {
      this.vm.isClicked(true);
      alert('hey, you need to pay');
    });
  }
}

var todoComponent = {
  
  // pure function view that renders base on data states and application states
  view(ctrl) {
    return m('.stuff', [
      m('ul', ctrl.todos().filter(item => !item.isAchieved()).map(item => m('li', item)))
      m('button', {onclick: () => vm.emit('click')}),
      m('span', ctrl.vm.isClicked() ? 'button is clicked' : 'button is not clicked')
    ]);
  }
  
};