Can't conditionally render view marionette

Question

I can't figure out how to use a function to decide which child view to render in marionette. It seems like it should be pretty simple based on the documentation here: https://marionettejs.com/docs/master/marionette.collectionview.html#collectionviews-childview

I found that page from the composite view docs which inferred that using a function to define a childView should be the same for collection and composite views https://marionettejs.com/docs/master/marionette.compositeview.html#compositeviews-childview)

However, with the following code I am getting the error message "Uncaught TypeError: view.on is not a function." My code is below:

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();

Why isn't the ToDo view being rendered?

Please include a minimal reproducible example using a runnable stack snippet. — Emile Bergeron

lucasjackson lucasjackson · Accepted Answer · 2017-11-21T21:41:28

It appears as if you are using an older version of Marionette (LayoutView for example was removed in version 3) and referencing the documentation for the newest version (currently 3.5.1).

In older versions of Marionette, childView as a function is not supported, instead you should use getChildView

So, the relevant portion of your code should look like:

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

Can't conditionally render view marionette

1 Answers