Issue related to rendering multiple views through a single view

Question

Question Updated

I am implementing a search and result for the same in the same page. i have two seperate html views and views for search and result. Here is what is happening..

From my router the below view is loaded. This view will load two other views called search and result. I have included the respective html views in the seperate views. but when i run the proj, it displays nothing.

1. Am i rendering the view in this file wrong ??
2. if i am rendering it wrong can somebody please tell me where is the mistake and how to rectify it ??
3. should i include the respective html templates of search and result also in this file ??

views.driver.search.js :

define(
    [ 'jquery',
      'underscore',
      'backbone',
      'app/models/model.driver',
      'app/collections/collection.driver',
      'app/models/model.driver.searchform',
      'app/dashboard/views.driver.searchForm',
      'app/models/model.driver.searchresult',
      'app/dashboard/views.driver.searchResults',

      ],

function ($, _, Backbone, DriverModel,SearchResultCollection ,searchFormModel, searchFormView, SearchResultModel,SearchResultView) {
    var DriverSearchView = Backbone.View.extend({
        el: $('#content'),

        initialize: function(){
            this.render();
        },

        render: function () {

//              var compiledTemplate = _.template(searchFormTemplate, {});
//                this.$el.html(compiledTemplate);

            this.searchFormInitModel = new searchFormModel();   
            var searchformView = new searchFormView({model:this.searchFormInitModel});
            this.$("#content").html(searchformView.render());

            var driver1 = new DriverModel({id:1,firstName:"driver1",lastName:'last',dob:'12/12/12001',});
            var driver2 = new DriverModel({id:2,firstName:"driver2",lastName:'last',dob:'12/12/12001',});
            var driver3 = new DriverModel({id:3,firstName:"driver3",lastName:'last',dob:'12/12/12001',});
            var driver4 = new DriverModel({id:4,firstName:"driver3",lastName:'last',dob:'12/12/12001',});

            this.searchResultCollection= new SearchResultCollection([driver1, driver2, driver3, driver4]);
            var searchResultView = new SearchResultView({el:this.$el.find("#searchResult"),collection:this.searchResultCollection});
            this.$("#content").html(searchResultView.render());

            //this.$el.find("#searchResult").html(searchResultView.render());
         }

    }); // Our module now returns our view 
    return DriverSearchView;
});

Answer 1

I don't see an issue with your workflow. Reason you are not seeing your console.logs, is because you are returning an object literal containing your initialize function without actually calling the function. Is there a reason you need to return an object from your initialize module?

Anyhow, I am not entirely sure how you calling your app.js file, but try the following if you do not need to return an object back from your initialize module

define(
[
 'jquery',
 'underscore',
 'backbone',
 'app/router',
// 'datatable'
],
function ($, _, backbone, router){   //,datatable) {

    var initialize = (function () {

        console.log("App1");
        debugger;
        console.log("App2");
        router.initialize();
        console.log("App3");
    })();

   // Depending what you want to do here, you could just
   // console.log("Router initialized...");
   // router.initialize();

});