title: How to load external html template in backbone view
body: <p>I am a novice to backbone and need your help. I am facing an issue where I am not able to load an external template.
  Here's the question:</p>
  
  <p>I have a home_template.html which has a div i need to populate with an external template</p>
  
  <pre><code>    &lt;div class="ASContainer" id="asContainerView"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Now I have a Homeview.js</p>
  
  <pre><code>define([
      'jquery',
      'underscore',
      'backbone',
      'marionette',
      'text!templates/home/homeTemplate.html',
      'text!templates/home/activityTemplate.html',
      'text!templates/compose/composeTemplate.html',
      'text!templates/comments/commentsTemplate.html',
      'views/home/ActivityListView',
      'views/ComposePost/ComposePostView',
      'views/ComposePost/WSListView', 
  ], function ($, _, Backbone, Marionette, homeTemplate, activityTemplate, composeTemplate, commentsTemplate, ActivityListView, ComposePostView, WSListView) {
  
  var HomeView = Backbone.View.extend({
          el : $("#page"),
  
          transition : 'slide',
          activitiesListView : null,
  
          initialize : function () {
  
              this.$el.attr('data-transition', this.transition);
              this.currentUserLogin = currentUserLogin;
              var that = this;
              this.activityId = this.options.activityId;
              this.workspaceUrl = this.options.workspaceUrl;
              this.context = this.options.parentContext;
          },
          events : {
              'click #composePost' : 'onComposePost',
              'click #btnPost' : 'onPostClick',
              'click #cancelpost' : 'onCancelClick',
              'click #comments' : 'OnCommentsClick',
              'click #LeftNavIcon' : 'OnLeftNavigationClick',
  
          },
          render : function () { debugger
              var that = this;
              $('.menu li').removeClass('active');
              $('.menu li a[href="#"]').parent().addClass('active');
  
              that.callAjaxReload("homeTemplate.html", "aaa", "AS_Content");
  
              this.$el.html(homeTemplate);
  
              $("#userloggedin").text(currentUserLogin);
  
              //var sidebarView = new SidebarView();
              //sidebarView.render();
  
          },
           cleanup: function() { 
              this.undelegateEvents();
              $(this.el).empty();
          },
  
          getActivitiesForWorkspace: function(ActStreamPageSize, activityId) { debugger;
              try {
                  //LogInfoStart('getActivitiesStreamAjaxCommand');
                  var BrowserTimeZone = getTimezoneName();
                  $.ajax({
                      type : "POST",
                      url : siteBaseUrl + '/ActivityStreamClientService.svc/GetActivityStreamForWorkSpace',
                      contentType : "application/json; charset=utf-8",
                      dataType : 'json',
                      cache : false,
                      data : JSON.stringify({
                          workspaceUrl : siteBaseUrl,
                          userLoginName : currentUser,
                          filterValue : "All",
                          searchTxt : '',
                          searchFilter : "All", //add
                          searchTag : '', //add
                          activityId : activityId,
                          pageSize : 5,
                          commentCount : 9999,
                          tabContext : "MY",
                          customFilter : '',
                          activityMode : '',
                          time : new Date(), // need to add this for iPhone caching ajax posts problem!
                          browserTimeZone : BrowserTimeZone, // added for time zone changes in new ux
                          MySiteMode : '',
                          MySiteLogggedInUserName : '',
                          MySiteProfileVisitorruserName : '',
                          MySiteDetails : ''
                      }),
                      processData : true,
                      success : function (msg) { debugger;
                          //Define collection
                          var model = Backbone.Model.extend({});
                          var collection = Backbone.Collection.extend({
                                  model : model
                              });
                          //var activityListView = ActivityListView({model : activitiesList});
                          //Add it to the collection after fetch
                          msgActivities = msg.GetActivityStreamForWorkSpaceResult;
  
                          var activitiesList = new collection(msgActivities);
                          //gtemplate = $('#personTemplate').html();
                          //var template: _.template( $('#personTemplate').html());
                          if (activityId &lt;= 0) {
                              console.log("here");
  
                              $("#asContainerView").html(ActivityListView({model : activitiesList}).el);
  
                              }
                          else {
                                  console.log("I am there");
                              $(new ActivityListView({model : activitiesList}).el).appendTo("#asContainerView");
                          }
                          lastactivityId = msgActivities[(msgActivities.length - 1)].ActivityID;
  
                          //Add collection to context
                          // that.context.collections.add(activitiesCollection, collectionTitle);
                          //that.context.currentCollectionNameId = collectionTitle; // for details page to work (ws url of stream is different than the activity ws url!!
  
                          //that.GetActivitiesSuccess(msg, dfd, that.eventData.onSuccessCallback);
                          //customFilterValue = "all";
                      },
                      error : function (err) {
                          //LogError('activities-ajax-commands.js getActivitiesStreamAjaxCommand.execute - Error', '', //that.context.parentContext.mainGlobalObject.CurrentUser, err);
                          //$.utilsSystem.alert('Error getting activities.', 'single');
                          //if (onSuccessCallback) onSuccessCallback();
                      }
  
                  });
              } catch (err) {
                  // LogError('activities-ajax-commands.js getActivitiesStreamAjaxCommand.GetActivitiesError', '', $.SX.mainGlobalObject.CurrentUser, err);
              }
          },
          callAjaxReload: function (url, parameter, classname) { debugger;
              var that = this;
              console.log(classname);
              // $.ajax({
              //url:url,
              //dataType:datatype,
              //success:function(data){
  
              // }
              //GetConfigurationSettings
              var BrowserTimeZone = getTimezoneName();
  
              $.ajax({ 
                  type : "GET",
                  url : siteBaseUrl + '/ActivityStreamClientService.svc/GetConfigurationSettings', //this.ActivitiesStreamOptions.ACTSTREAMGETCONFIGITEMURL,
                  contentType : "application/json; charset=utf-8",
                  dataType : 'json',
                  data : {
                      configurationItem : "ActivityStreamCount",
                      workspaceUrl : siteBaseUrl //this.ActivitiesStreamOptions.ActStreamWorkspaceUrl
                  },
                  async : false,
                  success : function (msg) { debugger;
                      //ActivitiesStreamOptions.ActStreamPageSize = msg.GetConfigurationSettingsResult[0];
                      ActivityStreamPageSize = msg.GetConfigurationSettingsResult[0];
                      that.**getActivitiesForWorkspace**(msg.GetConfigurationSettingsResult[0], 0);
                      debugger;
                      //console.log(ActivitiesStreamOptions.ActStreamPageSize);
                      //  ActivitiesStreamOptions.ActStreamFilterValue = '';
                  },
                  error : function (err) {
                      console.log("Error: Hasan");
                      //LogError('activities-ajax-commands.js getActivitiesStreamAjaxCommand.execute - Error', '', that.context.parentContext.mainGlobalObject.CurrentUser, err);
                      // that.ActivitiesStreamOptions.ActStreamPageSize = 5;
                  }
              });
  
              //})
  
              //$('.'+classname).html(data);
          },
  
  
      });
  
  return HomeView;
  </code></pre>
  
  <p>});</p>
  
  <p>Now this HomeView js has two functions. callAjaxReload and getActivitiesForWorkspace. 
  The render calls callAjaxReload which has an ajax function which on success calls getActivitiesForWorkspace.Now getActivitiesForWorkspace also has an ajax function and on whose success I have to pass the model to another View ActivityList View and appends that the template under the div id asContainerView. </p>
  
  <p>The problem which I am facing is that the this line below fails to load the ActivityListView.</p>
  
  <p><strong>$("#asContainerView").html(ActivityListView({model : activitiesList}).el);</strong></p>
  
  <p>I get an error that ActivityListView is undefined.</p>
  
  <p>Can anybody help me here.</p>
  
  <p>The ActivityListView.js is </p>
  
  <pre><code>define([
      'jquery',
      'underscore',
      'backbone',
      'marionette',
      'views/home/ActivityListItemView',
      'text!templates/home/activityTemplate.html',
  ], function ($, _, Backbone, Marionette, ActivityListItemView, activityTemplate) {
  
  var ActivityListView = Backbone.View.extend({
  
      initialize: function () {
          this.render();
      },
  
      render: function () { 
          var activities = this.model.models;
          var len = activities.length;
          //var startPos = (this.options.page - 1) * 8;
          //var endPos = Math.min(startPos + 8, len);
          var startPos = 0;
          var endPos = len;
  
          //$(this.el).html('&lt;ul class="thumbnails"&gt;&lt;/ul&gt;');
  
          for (var i = startPos; i &lt; endPos; i++) {
            { //$(this.el).append(new ActivityListItemView({model: activities[i]}).initialize);
                              //console.log("activities[i]:"activityListItemView.model.attributes.ActivityTypeSourceName);
              var activityListItemView = new ActivityListItemView({ model: activities[i] });
  
              $(this.el).append(activityListItemView.el);
              }
  //console.log(activityListItemView.el);
             //var personView = new PersonView({ model: person });
          }
  
          //$(this.el).append(new Paginator({model: this.model, page: this.options.page}).render().el);
  
          return this;
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>and this calls ActivityListItemView.js</p>
  
  <pre><code>define([
      'jquery',
      'underscore',
      'backbone',
      'marionette',
      'text!templates/home/activityTemplate.html',
  ], function ($, _, Backbone, Marionette, activityTemplate) {
  var ActivityListItemView = Backbone.View.extend({
  
      tagName: "div",
      template: activityTemplate,
      //my_template: _.template(gtemplate1),
      //my_template: _.template("&lt;p class=\"AS_Content\"&gt; &lt;%= ActivityContent %&gt; &lt;/p&gt; "),
  
       initialize: function(){
        this.render();
      },
  
       render: function(){ debugger;
        //$(this.el).html(this.template(this.model.toJSON()));
  
        this.$el.html(_.template(this.template, { user: this.model.attributes }));
          //this.$el( this.template(this.model.toJSON()));    
        //this.$el.html( this.template(this.model.toJSON()));
  
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>Thanks</p>