ブラウザで私のアプリケーションレンダリングが見えないのはなぜですか（Marionette.jsチュートリアル）？

Question

私はMarionette.jsを新しくしました。私は、2.4バージョンに基づいているmarionetteのWebページにあるチュートリアルに従っています。このバージョン以降に変更されています。現在のバージョンは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 }); 

ビュー/ 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; 

ビュー/ 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; 

それはここでトリガされている間、マンガンV3はビューのonShow ..を持っていない

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

todo.jsビュー/ 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; 

モデル/私はそれを避けることをお勧めします：https://github.com/marionettejs/guides/issues/43

しかし、あなたはまた、 oアプリケーションの実行時にDOMに$('#app-hook')が含まれていることを確認します。