Question

我是Marionette.js的新手，我一直在关注基于2.4版本的marionette网页上的教程，自从这个版本以来，一些事情发生了变化。目前的版本是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

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

为什么我无法在浏览器中看到我的应用程序渲染（Marionette.js教程）？

1 个答案: