无法有条件地呈现视图 marionette

Can't conditionally render view marionette

我不知道如何使用函数来决定在 marionette 中呈现哪个子视图。根据此处的文档,它似乎应该非常简单:https://marionettejs.com/docs/master/marionette.collectionview.html#collectionviews-childview

我发现复合视图文档中的页面推断使用函数定义子视图对于集合视图和复合视图应该是相同的https://marionettejs.com/docs/master/marionette.compositeview.html#compositeviews-childview)

但是,使用以下代码我收到错误消息"Uncaught TypeError: view.on is not a function."我的代码如下:

var Backbone = require('backbone');
var Marionette = require('backbone.marionette');

var ToDoModel = require('./models/todo');

var ToDo = Marionette.LayoutView.extend({
  tagName: 'li',
  template: require('./templates/todoitem.hbs')
});


var TodoList = Marionette.CompositeView.extend({
  el: '#app-hook',
  template: require('./templates/todolist.html'),

  childView: function(item) {
    return ToDo;
  },
  childViewContainer: 'ul',

  ui: {
    assignee: '#id_assignee',
    form: 'form',
    text: '#id_text'
  },

  triggers: {
    'submit @ui.form': 'add:todo:item'
  },

  collectionEvents: {
    add: 'itemAdded'
  },

  modelEvents: {
    invalid: 'itemInvalid'
  },

  onAddTodoItem: function() {
    this.model.set({
      assignee: this.ui.assignee.val(),
      text: this.ui.text.val()
    });

    if (this.model.isValid()) {
      var items = this.model.pick('assignee', 'text');
      this.collection.add(items);
    }
  },

  itemAdded: function() {
    this.model.set({
      assignee: '',
      text: ''
    });

    this.ui.assignee.val('');
    this.ui.text.val('');
  },

  itemInvalid: function() {
    console.log('this item is invalid!')
  }

});


var todo = new TodoList({
  collection: new Backbone.Collection([
    {assignee: 'Scott', text: 'Write a book about Marionette'},
    {assignee: 'Andrew', text: 'Do some coding'}
  ]),
  model: new ToDoModel()
});

todo.render();

为什么未呈现 ToDo 视图?

您似乎在使用旧版本的 Marionette(例如,LayoutView 在版本 3 中被删除)并引用了最新版本(当前为 3.5.1)的文档。

在旧版本的 Marionette 中,不支持 childView 作为函数,您应该使用 getChildView

因此,代码的相关部分应如下所示:

var TodoList = Marionette.CompositeView.extend({
  ...
  getChildView: function(item) {
    return ToDo;
  },
  ...
});