Why I can't see my App rendering in the browser(Marionette.js tutorial)?

Question

I'm new in Marionette.js and I've been following the tutorial that is in the web page of marionette which is based in the 2.4 version and somethings are changed since this version. The current version is 3 (the one I need to learn), so I've followed the todo tutorial and while doing it I tried to check out the documentation of the version 3 and changed some things to make the tutorial work for the new version.

The Problem:

I cant see my app in the browser and also I get no console errors, I may not understand everything in the version 3 documentation because I am not to experienced but I need to learn this for my new job. I hope someone can give me an advice of how to solve this problem.

Here is the code:

driver.js

var Mn = require('backbone.marionette');
var TodoView = require('./views/layout');
var ToDoModel = require('./models/todo');

var initialData = [
      { assignee: 'Scott', text: 'Write something'} ,
      { assignee: 'Andrew', text: 'do more' }
];

var App = new Mn.Application({
   onStart: function(options) {
     var todo = new TodoView({
          collection: new Backbone.Collection(options.initialData),
          model: new ToDoModel()
     });
     todo.render();
     todo.triggerMethod('show');
   }
});

App.start({ initialData: initialData });

views/layout.js

var Bb = require('backbone');
var Mn = require('backbone.marionette');
var ToDoModel = require('../models/todo');

var FormView = require('./form');
var ListView = require('./list');

var Layout = Mn.View.extend({
  el: '#app-hook',
  template: require('../templates/layout.html'),

  regions: {
     form: '.form',
     list: '.list'
  },

  collectionEvents: {
     add: 'itemAdded'
  },

  onShow: function() {
     var formView = new FormView({ model: this.model });
     var lisView = new ListView({ collection: this.collection });

     this.showChildView('form', formView);
     this.showChildView('líst', listView);
  },

  onChildviewAddTodoItem: function(child) {
     this.model.set({
         assignee: child.ui.assignee.val(),
         text: child.ui.text.val()
     }, { validate: true });

     var items = this.model.pick('assignee', 'text');
     this.collection.add(items);
  },

  itemAdded: function() {
     this.model.set({
         assignee: '',
         text: ''
     });
  }
});

module.exports = Layout;

views/form.js

var Mn = require('backbone.marionette');

var FormView = Mn.View.extend({
   tagName: 'form',
   template: require('../templates/form.html'),

   triggers: {
   submit: 'add:todo:item'
   },

   modelEvents: {
      change: 'render'
   },

   ui: {
     assignee: '#id_assignee',
     text: '#id_text'
   }
});
module.exports = FormView;

views/list.js

var Mn = require('backbone.marionette')

var ToDo = Mn.View.extend({
    tagName: 'li',
    template: require('../templates/todoitem.html')
});

var TodoList = Mn.CollectionView.extend({
    tagName: 'ul',
    childView: ToDo,
});

module.exports = TodoList;

models/todo.js

var Bb = require('backbone');

var ToDo = Bb.Model.extend({
  dafaults: {
    assignee: '',
    text: ''
  },

  validate: function(attrs) {
    var errors = {};
    var hasError = false;
    if (!attrs.assignee) {
        errors.assignee = 'assignee must be set';
        hasError = true;
    }
    if (!attrs.text) {
        errors.text = 'text must be set';
        hasError = true;
    }

    if (hasError) {
        return errors;
    }
  }
});

module.exports = ToDo;

Answer 1

Mn v3 does not have an onShow for views.. while it is being triggered here I would recommend you avoid it: https://github.com/marionettejs/guides/issues/43

But you also need to make sure the DOM has a $('#app-hook') when the app is run.