為什么在瀏覽器中看不到我的App渲染（Marionette.js教程）？

Question

我是Marionette.js的新手，我一直在遵循marionette網頁上的教程，該教程基於2.4版本，並且自該版本以來有所更改。 當前版本是3（我需要學習的版本），因此我遵循了todo教程，在這樣做的同時，我嘗試查看版本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;

型號/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') 。