Почему я не вижу свое приложение в браузере (учебник Marionette.js)?

Question

Я новичок в Marionette.js, и я слежу за учебником, который находится на веб-странице марионетки, которая основана на версии 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 }); 

просмотров/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; 

просмотров/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

Но вам также нужно t o убедитесь, что DOM имеет $('#app-hook'), когда приложение запущено.