Question

我无法弄清楚如何使用函数来决定在牵线木偶中呈现哪个子视图。基于这里的文档，它似乎应该非常简单：https://marionettejs.com/docs/master/marionette.collectionview.html#collectionviews-childview

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

但是，使用以下代码我收到错误消息“Uncaught TypeError：view.on不是函数”。我的代码如下：

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视图？

Answer 1

好像您使用的是较旧版本的Marionette（例如LayoutView已在版本3中删除）并引用了最新版本的文档（目前为3.5.1）。

在Marionette的旧版本中，不支持childView作为函数，而应使用getChildView

因此，代码的相关部分应如下所示：

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

无法有条件地渲染视图牵线木偶

1 个答案: