Root View for a simple note-taking app

root.js

import {View} from 'backbone.marionette';
import {template} from 'underscore';

import {NoteCollection} from './notes';
import {NoteModel} from './note';

import {NoteListView} from './list';
import {NoteView} from './detail';


export const RootView = View.extend({
  template: template('<div class="primary-hook"></div>'),
  
  regions: {
    primary: '.primary-hook',
  },
  
  /** This listens to events on its child views to figure out what
  * we should be showing to the user.
  */
  childViewEvents: {
    'detail:back': 'showNoteList',
    'note:create': 'showCreateNote',
    'note:list': 'showNoteList',
    'note:view': 'showNote'
  },
  
  /** Shows the list on our first render */
  onRender() {
    this.showNoteList();
  },
  
  /** Shows the full note list */
  showNoteList() {
    const notes = new NoteCollection();
    notes.fetch();
    this.showChildView('primary', new NoteListView({
      collection: notes
    }));
  },
  
  /** Show a single note - we need to pass a note model in every 
  * time for this to work 
  */
  showNote(note) {
    this.showChildView('primary', new NoteView({
        model: note
    }));
  },
  
  /** Create a new note with the note view */
  showCreateNote() {
    const note = new NoteModel();
    this.showNote(note);
});