Reqiurejs and Backbone - Collection fetch

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