Reqiurejs and Backbone - Collection fetch - backbone.js

Question

When I manually define my collection content, everything works. But after I try to fetch data from server(I get valid response), my View is not showing. Collection View (ul) is showing, but single views (li) are not ? Is there something I need to watch when fetching data to collection ?
UPDATE
main.js
require.config({
paths: {
"jquery":"vendor/jquery/jquery",
"underscore":"vendor/underscore-amd/underscore",
"backbone":"vendor/backbone-amd/backbone",
"text":"../vendor/requirejs/text",
"mustache": "../vendor/mustache/mustache"
},
shim: {
underscore: {
exports: "_"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
require([
'app',
], function(App){
// The "app" dependency is passed in as "App"
App.initialize();
});
app.js
define([
'jquery',
'underscore',
'backbone',
'collections/ObjaveCollection',
'views/ObjaveView'
], function($, _, Backbone,ObjaveCollection,ObjaveView){
var initialize = function(){
var objave = new ObjaveCollection();
objave.fetch();
var objaveView = new ObjaveView({ collection: objave});
$(document.body).append(objaveView.render().el);
}
return {
initialize : initialize
};
});
ObjavaModel.js
define([
'jquery',
'underscore',
'backbone'
], function($, _, Backbone){
var ObjavaModel = Backbone.Model.extend({
defaults:{
naslov: 'My service',
cijena: 100,
}
});
return ObjavaModel;
});
ObjaveCollection.js
define([
'jquery',
'underscore',
'backbone',
'models/ObjavaModel'
], function($, _,Backbone,ObjavaModel){
var ObjaveCollection = Backbone.Collection.extend({
model: ObjavaModel
});
return ObjaveCollection;
});
ObjavaView.js
define([
'jquery',
'underscore',
'backbone',
'text!templates/objavaTemplate.html',
'mustache',
], function($, _, Backbone,objavaTemplate,Mustache){
var ObjavaView = Backbone.View.extend({
tagName: "li",
initialize: function () {
this.template = objavaTemplate;
},
render: function() {
rendered = Mustache.to_html(this.template, this.model.toJSON());
$(this.el).html(rendered);
return this;
}
});
return ObjavaView;
});
ObjaveView.js
define([
'jquery',
'underscore',
'backbone',
'views/ObjavaView'
], function($, _, Backbone,ObjavaView){
var ObjaveView = Backbone.View.extend({
tagName: 'ul',
render: function() {
this.collection.each(function(item) {
console.log(item);
var objavaView = new ObjavaView({ model: item });
console.log(this.$el);
this.$el.append(objavaView.render().el);
}, this);
return this;
}
});
return ObjaveView;
});

Answer 1

Are you rerendering your view after the data has been fetched? For example, in your view (ObjaveView.js) add:
initialize: function () {
this.listenTo(this.collection, "sync", this.render);
}