我是骨干新手，需要您的帮助。我遇到无法加载外部模板的问题。
这是问题：
我有一个home_template.html，其中有一个div，我需要使用外部模板进行填充
<div class="ASContainer" id="asContainerView">
</div>
现在我有一个Homeview.js
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 <= 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;
}）;
现在，此HomeView js具有两个功能。 callAjaxReload和getActivitiesForWorkspace。
渲染调用了具有Ajax函数的callAjaxReload，成功调用了getActivitiesForWorkspace。现在getActivitiesForWorkspace也具有ajax函数，并且在其成功后我必须将模型传递给另一个View ActivityList视图，并将该模板附加到div id asContainerView下。
我面临的问题是下面的此行无法加载ActivityListView。
$（“＃asContainerView”）。html（ActivityListView（{model：ActivitiesList}）。el）;
我收到一个未定义ActivityListView的错误。
有人可以帮我吗？
ActivityListView.js是
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('<ul class="thumbnails"></ul>');
for (var i = startPos; i < 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;
}
});
}）;
这将调用ActivityListItemView.js
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("<p class=\"AS_Content\"> <%= ActivityContent %> </p> "),
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()));
}
});
}）;
谢谢
最佳答案
你有：
$("#asContainerView").html(ActivityListView({model : activitiesList}).el);
但是您的语法已关闭；当您要实例化一个新的
Backbone.View时，您需要使用new关键字：$("#asContainerView").html(new ActivityListView({model : activitiesList}).el);