我有一個loginview和它的loginmodel。 loginmodel是從mainrouter的初始化創建的。根據loginmodel的loginp屬性,主路由器的render_home
決定是否渲染homeview或導航到登錄路由,該路由調用render_login
。 render_login
有一個方法來save()
從loginview的輸入字段填充loginmodel。所以如果數據是正確的save()
響應和loginmodel更改,其loginp屬性將變爲true。所以現在應該呈現homeview。但我無法成功。將控制權從視圖傳遞迴主幹路由器?
我認爲在這一點上,控制權應該傳回到mainrouter的路線,再次調用render_home
。所以它測試loginView.model.get('loginp') == true
,結果爲true,所以這次創建homeview並通過已在homeview中定義的homeView.render()
進行渲染。
我把一個listenTo在loginview中當它的模型改變或同步,以調用mainrouter中的路由來調用render_home。但是這種結局在這兩種觀點之間無休止的來回,沒有任何渲染。 this.listenTo(this.loginView.model, 'sync', Backbone.history.navigate("",{trigger:true}));
路線""
順便指定render_home
。
我錯過了什麼。是否無法將控制權交還給路由器? 主路由器:
define([
'jquery',
'ratchet',
'underscore',
'backbone',
'login/loginmodel',
'login/loginview',
'register/registerview',
'home/homeview',
],
function($, Ratchet, _, Backbone, LoginModel, LoginView, RegisterView, HomeView){
var MainRouter = Backbone.Router.extend({
routes: {
"": "render_home",
"login": "render_login",
"register": "render_register"
},
initialize: function(){
this.loginView = new LoginView;
},
render_home: function(){
this.loginView.model.fetch({
success: function(model){
if(model.get('loginp') == true){ //show you app view for logged in users!
this.homeView = new HomeView();
this.homeView.render();
}
else { //not logged in!
Backbone.history.navigate("/login", {trigger:true})
}
},
});
},
render_login: function(){ //display your login view
this.loginView.render();
},
render_register: function(){ //display your register view
this.registerView = new RegisterView;
this.registerView.render();
},
});
return MainRouter;
});
loginview:
define([
'jquery',
'ratchet',
'underscore',
'backbone',
'login/loginmodel',
'text!login/logintemplate.html',
],
function($, Ratchet, _, Backbone, LoginModel, LoginTemplate){
var LoginView = Backbone.View.extend({
el: $('body'),
initialize: function(){
this.model = new LoginModel;
},
template: _.template(LoginTemplate),
render: function(){ //display your login view
this.$el.html(this.template(this.model.attributes));
},
events: {
'keyup input' : 'updateform',
'click #loginbutton' : 'login',
'click #renderregisterbutton' : 'render_register',
},
updateform: function(e){
var el = e.target;
var formData = {};
formData[ el.id ] = $(el).val();
this.model.set(formData);
},
login: function(e){
e.preventDefault();
this.model.save();
console.log(JSON.stringify(this.model));
},
render_register: function(){
Backbone.history.navigate("/register", {trigger:true});
},
});
return LoginView;
});
loginmodel:
define([
'underscore',
'backbone',
],
function(_, Backbone) {
var LoginModel = Backbone.Model.extend({
urlRoot: '/log_in',
defaults: {
username: null,
},
});
return LoginModel;
});
感謝您的回覆。它給了我關於控制通行證的見解。當我添加你建議的導航時,它會在兩個視圖之間引起無限的來回。現在我已經解決了它。當我完成時我會寫。它在路由器中包含一個'this.listenTo(this.loginView.model,'change',this.render_home); //這個解決了render_home問題。' – 2014-10-17 00:22:15
啊,對不起,我的解決方案沒有工作「開箱即用」(有時可能很難在沒有IDE /測試環境的情況下爲StackOverflow編寫代碼)。當你有最終的解決方案時,你可以:A)將它作爲單獨的答案發布,B)編輯我的答案並添加新的代碼,或者C)(如果你沒有編輯權限)添加新代碼作爲評論我很樂意用它更新我的答案。 – machineghost 2014-10-17 17:21:16