为什么我在浏览器中看不到我的 App 渲染（Marionette.js 教程）？

Question

我是 Marionette.js 的新手，我一直在关注 marionette 网页中的教程，该教程基于 2.4 版本，自此版本以来有些内容有所更改。当前版本是 3（我需要学习的版本），所以我遵循了待办事项教程，在做的同时我尝试查看版本 3 的文档并更改了一些内容以使教程适用于新版本.

问题：

我无法在浏览器中看到我的应用程序，也没有控制台错误，我可能无法理解版本 3 文档中的所有内容，因为我没有经验，但我需要为我的新工作学习这个。我希望有人能给我一个如何解决这个问题的建议。

代码如下：

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 没有 onShow 的视图。当它在这里被触发时，我建议你避免它：https://github.com/marionettejs/guides/issues/43

但您还需要确保 DOM 在应用运行时具有 $('#app-hook')。

为什么我在浏览器中看不到我的 App 渲染（Marionette.js 教程）？

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

javascript

node.js

backbone.js

marionette