* UPDATE: RESOLVED, PLEASE SCROLL DOWN *
With the below, the list renders, but no rows are rendered. This is because I don't define the collection inside the composite view.
If I do put: collection: new Users in list.js then I get this error:
Uncaught TypeError: Object function () {
return parent.apply(this, arguments);
} has no method 'on'
in backbone.js: line 203, which is:
// An inversion-of-control version of `on`. Tell *this* object to listen to
// an event in another object ... keeping track of what it's listening to.
listenTo: function (obj, name, callback) {
var listeners = this._listeners || (this._listeners = {});
var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
listeners[id] = obj;
obj.on(name, typeof name === 'object' ? this : callback, this);
return this;
},
Views
row.js
define([
'marionette',
'text!app/views/templates/user/row.html'
],
function (Marionette, Template) {
"use strict"
return Marionette.ItemView.extend({
template: Template,
tagName: 'tr'
})
})
list.js
define([
'marionette',
'text!app/views/templates/user/list.html',
'app/collections/users',
'app/views/user/row'
],
function (Marionette, Template, Users, User) {
"use strict"
return Backbone.Marionette.CompositeView.extend({
template: Template,
itemView: User,
itemViewContainer: "tbody",
})
})
This has been resolved by doing this:
user/list.js
define([
'marionette',
'text!app/views/templates/user/list.html',
'app/collections/users',
'app/views/user/row'
],
function (Marionette, Template, Users, User) {
"use strict"
return Backbone.Marionette.CompositeView.extend({
template: Template,
itemView: User,
itemViewContainer: "tbody",
initialize: function() {
this.collection = new Users()
this.collection.fetch()
}
})
})
user/row.js
define([
'marionette',
'text!app/views/templates/user/row.html'
],
function (Marionette, Template) {
"use strict"
return Backbone.Marionette.ItemView.extend({
template: Template,
tagName: "tr"
})
})
