我是骨干新手，使用主干和requirejs来制作我的第一个SPA。 当用户导航到site.com/#report/1时，API调用将转至site.com/app/report/1并收集数据并在视图页中呈现数据。然后，他转到仪表板并导航到site.com/#report/2，另一个API调用收集报告2的数据并显示。问题是当我使用任何事件处理程序时。在视图页面中，当任何人点击任何事件时，在回调中它表示有两个JSON对象保存为模型。但它应该只是第二个。第一个报告数据也出现在console.log中。
为了更好地理解，我提供了路由器，模型和视图页面的代码。
路由器
define([
'backbone',
'models/authlogin',
], function (Backbone, AuthloginModel) {
var AppRouter = Backbone.Router.extend({
routes: {
'': 'renderLoginPage',
'dashboard': 'renderDashBoard',
'report/:id': 'renderReportDetails',
'report/new': 'renderNewReportPage',
'members': 'renderMembersPage',
'member/:id': 'renderMemberPage',
'login': 'renderLoginPage',
'organization': 'renderOrganizationPage',
'programs': 'renderProgramsPage',
'program/:id': 'renderProgramPage',
'*path': 'errorpage'
},
errorpage: function () {
requirejs(['views/404', 'views/dashboard'], function (errorview, DashboardView) {
if ($('nav').length != 1) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
}
new errorview;
});
},
renderLoginPage: function () {
requirejs(['models/auth', 'views/login'], function (AuthModel, LoginView) {
var auth = new AuthModel;
new LoginView({model: auth});
});
},
renderDashBoard: function () {
requirejs([
'collections/reports',
'views/reports',
'views/dashboard',
'../../javascript/main',
], function (ReportsCollection, ReportsView, DashboardView, MainJS) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
var reports = new ReportsCollection;
reports.fetch({wait: true}).then(function () {
new ReportsView({collection: reports});
});
});
},
renderReportDetails: function (page) {
requirejs([
'models/reportdetails',
'views/reportdetails',
'views/dashboard'
], function (ReportDetailsModel, ReportdetailsView, DashboardView) {
var reportdetails = new ReportDetailsModel({id: page});
reportdetails.fetch().then(function () {
if ($('nav').length != 1) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
}
;
new ReportdetailsView({model: reportdetails});
});
});
},
renderNewReportPage: function () {
requirejs([
'collections/newreports',
'views/reports',
'views/newreports',
'../../javascript/main',
], function (ReportsCollection, ReportsView, DashboardView, MainJS) {
})
},
renderMembersPage: function () {
requirejs([
"collections/members",
"collections/invitations",
"views/members",
'views/dashboard'
], function (MembersCollection, InvitationsCollection, MembersView, DashboardView) {
var members = new MembersCollection();
members.fetch().then(function () {
var invitations = new InvitationsCollection();
invitations.fetch().then(function () {
if ($('nav').length != 1) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
}
new MembersView({collection: members, collection2: invitations});
});
});
});
},
renderOrganizationPage: function () {
requirejs([
'models/organization',
'models/orgMembers',
'views/organization',
'views/dashboard'
], function (OrgModel, OrgMembers, OrgView, DashboardView) {
var organization = new OrgModel();
var members = new OrgMembers();
organization.fetch().then(function () {
if ($('nav').length != 1) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
}
members.fetch().then(function () {
new OrgView({model: organization, model2: members});
})
})
});
},
renderProgramsPage: function(){
requirejs([
'collections/programs',
'models/program',
'views/programs',
'views/program',
'views/dashboard'
],function(ProgramsCollection,ProgramsModel,ProgramsView,ProgramView,DashboardView){
var programscollection = new ProgramsCollection;
programscollection.fetch().then(function(){
if ($('nav').length != 1) {
var authlogin = new AuthloginModel;
new DashboardView({model: authlogin});
}
new ProgramsView({collection: programscollection});
});
});
}
});
var initialize = function () {
var app_router = new AppRouter;
Backbone.history.start();
};
return {
initialize: initialize
};
});
模型
define([
'underscore',
'backbone'
],function(_,Backbone){
var ReportDetailsModel = Backbone.Model.extend({
urlRoot: '/app/report/',
idAttribute: 'id'
});
return ReportDetailsModel;
});
查看
define([
'backbone',
'../../javascript/magnify_pop_up',
'text!templates/reportdetails.html',
'text!templates/reportcomments.html'
], function (Backbone, Magnify, ReportDetailsTemplate, RepCommentsTemplate) {
var ReportdetailsView = Backbone.View.extend({
el: '#container-2',
template: _.template(ReportDetailsTemplate),
initialize: function () {
this.render();
},
events: {
"click #reject": "reject",
"click #resolve": "resolve",
"click button.triage": "triage"
},
triage: function (e) {
e.preventDefault();
console.log(this.model.toJSON());
/* this.model.save({'status':1},{patch:true,success:function(model,response){
console.log('saved');
},error:function(model,response){
console.log('error');
}});*/
},
resolve: function (e) {
e.preventDefault();
this.model.save({'status':2},{patch:true});
},
reject: function (e) {
e.preventDefault();
this.model.save({'status':3},{patch:true});
},
render: function () {
$('#container').html(this.template(this.model.toJSON()));
this.$el.html(_.template(RepCommentsTemplate)(this.model.toJSON()));
return this;
}
});
return ReportdetailsView;
});