我需要首先根据用户选择的日期是过去还是将来设置Backbone视图的模板,以及稍后当它的集合更改从其他日期拉取数据时再切换它。我该怎么做呢?我以为我能够将模板设置为一个函数,该函数根据我是否过去返回正确的选择器字符串,但这不起作用。
pR.views.ScheduleJobView = Backbone.Marionette.ItemView.extend({
tagName: "tr",
// NEED A WAY TO SWITCH THIS TOO
template: "#schedule-job-template"
});
pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({
// DOESN'T WORK
template: function () {
if (this.isPast)
return "#schedule-jobs-past-template";
else
return "#schedule-jobs-template";
}, itemView: pR.views.ScheduleJobView,
itemView: pR.views.ScheduleJobView,
itemViewContainer: "tbody",
// Defaults for the model's url
baseUrl: "/schedules/day/",
baseApiUrl: "/api/schedule/day/",
// Empty object to store url parameters
urlParameters: {},
initialize: function () {
pR.vent.bindTo("change:parameters", this.changeUrl, this);
this.model.url = this.baseApiUrl;
},
onRender: function () {
console.log("Rendering Jobs View");
},
// Change the main model's url
changeUrl: function (parameters) {
// merge new parameters with old ones
this.urlParameters = _.extend(this.urlParameters, parameters);
var url = "";
var apiUrl = this.baseApiUrl;
_.each(this.urlParameters, function (value, parameter) {
// Add each parameter segment to the url
url = url + parameter + '/' + value + '/';
apiUrl = apiUrl + parameter + '/' + value + '/';
});
this.model.url = apiUrl;
console.log("Updated CurrentDay model url to " + apiUrl);
this.model.fetch();
console.log("Navigating to " + url);
pR.routers.appRouter.navigate(url);
},
// Check if we are in the past
isPast: function () {
var year = this.urlParameters.year;
var month = this.urlParameters.month;
var day = this.urlParameters.day;
var selectedDate = Date(year, month, day);
if (selectedDate < Date()){
return true;
} else {
return false;
}
}
});
请注意,我也在这里使用Marionette的复合视图,因此我需要一种方法来根据时间范围更改itemView的模板。如果我的基本策略经过深思熟虑,我绝对愿意接受这种方式。
答案 0 :(得分:17)
您正在将this.template设置为方法,而Marionette正在寻找字符串值。
您可以使用相同的逻辑但将其放入initialize
方法中。
pR.views.ScheduleJobsView = Backbone.Marionette.CompositeView.extend({
template: null,
[ ... ]
initialize: function () {
if (this.isPast) {
this.template = "#schedule-jobs-past-template";
} else {
this.template = "#schedule-jobs-template";
}
答案 1 :(得分:2)
为此我内置了一个名为getTemplate的函数,我知道我在文档中看到了它(那是我用Google搜索的内容)