Javascript 当主干应用程序中触发输入字段事件时，第一视图不希望从第二视图渲染？
我的每个视图都有一个模型和一个模板，还有一个表单模型实例，用于从各自的模板渲染它们。可以从两个视图访问表单模型实例以呈现其模板。需要在键入的每个字符上更新此表单模型实例，并使用此表单模型实例设置两个视图的当前视图的模型。为此，我在两个视图中的Javascript 当主干应用程序中触发输入字段事件时，第一视图不希望从第二视图渲染？,javascript,backbone.js,Javascript,Backbone.js,我的每个视图都有一个模型和一个模板，还有一个表单模型实例，用于从各自的模板渲染它们。可以从两个视图访问表单模型实例以呈现其模板。需要在键入的每个字符上更新此表单模型实例，并使用此表单模型实例设置两个视图的当前视图的模型。为此，我在两个视图中的input元素上都有一个keyup事件，该事件具有不同数量的输入视图。第二个视图具有与第一个视图相同的类型、命名、id、input字段和一些不同的字段 当我在具有更多输入字段的第二个视图上，单击并在两个视图的输入字段中键入一个字符时，第一个视图将渲染。在一个
inputkeyupinputthis.unbind（） define([
'jquery',
'ratchet',
'underscore',
'backbone',
'forms/formsdatamodel',
'login/loginview',
'register/registerview',
'home/homeview',
],
function($, Ratchet, _, Backbone, FormsDataModelInst, LoginView, RegisterView, HomeView){
var MainRouter = Backbone.Router.extend({
routes: {
"": "render_home",
"login": "render_login",
"register": "render_register"
},
initialize: function(){
this.model = FormsDataModelInst;
this.listenTo( this.model, 'change', this.render_home );//this solved render_home problem.
},
render_home: function(){
if( this.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 = new LoginView;
//this.loginView.delegateEvents();
this.loginView.render();
},
render_register: function(){ //display your register view
this.registerView = new RegisterView;
//this.registerView.delegateEvents();
this.registerView.render();
},
});
return MainRouter;
});
define([
'jquery',
'ratchet',
'underscore',
'backbone',
'login/loginmodel',
'text!login/logintemplate.html',
'forms/formsdatamodel',
],
function($, Ratchet, _, Backbone, LoginModel, LoginTemplate, FormsDataModelInst){
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( FormsDataModelInst.attributes ) );
},
events: {
'keyup input#username' : 'updateModel',
'click #loginbutton' : 'login',
'click #renderregisterbutton' : 'render_register',
},
updateModel: function(e){
e.preventDefault();
var elm = e.target;
FormsDataModelInst.set( elm.id, $( elm ).val() );
this.model.set( FormsDataModelInst );
console.log( "1-FormsDataModelInst:" + JSON.stringify( FormsDataModelInst.attributes ) );
console.log( "2-this.model.set(...):" + JSON.stringify(this.model.attributes) );
},
login: function(e){
e.preventDefault();
this.model.save();
console.log( "3-this.model.save():" + JSON.stringify(this.model.attributes) );
},
render_register: function(e){
e.preventDefault();
this.undelegateEvents();
Backbone.history.navigate("/register", {trigger:true});
},
});
return LoginView;
});
define([
'jquery',
'ratchet',
'underscore',
'backbone',
'register/registermodel',
'text!register/registertemplate.html',
'forms/formsdatamodel',
],
function($, Ratchet, _, Backbone, RegisterModel, RegisterTemplate, FormsDataModelInst){
var RegisterView = Backbone.View.extend({
el: $('body'),
initialize: function(){
this.model = new RegisterModel();
},
template: _.template( RegisterTemplate ),
render: function(){ //display your login view
this.$el.html( this.template( FormsDataModelInst.attributes ) );
},
events: {
'keyup input#username' : 'updateModel',
'keyup input#phone' : 'updateModel',
'keyup input#email' : 'updateModel',
'click #registerbutton' : 'register',
'click #renderloginbutton' : 'render_login',
},
updateModel: function(e){
e.preventDefault();
var elm = e.target;
FormsDataModelInst.set( elm.id, $( elm ).val() );
this.model.set( FormsDataModelInst );
console.log( "FormsDataModel:" + JSON.stringify( FormsDataModelInst ) );
console.log( "this.model.set(...):" + JSON.stringify(this.model.attributes) );
},
login: function(e){
e.preventDefault();
this.model.save();
console.log( "this.model.save():" + JSON.stringify(this.model) );
},
render_login: function(e){
e.preventDefault();
this.undelegateEvents();
Backbone.history.navigate("/login", {trigger:true});
},
});
return RegisterView;
});
当实例化
视图时视图的el
上设置事件绑定。如果不同的视图
也使用相同的输入
，这并不重要；只要第一个视图仍然存在，它的事件处理程序就会继续侦听和响应事件
尝试调用this.unbind（）
，您的想法是正确的。。。除了View
s没有unbind
方法之外。但是，它们确实有一个取消legateevents
方法，我想这就是您要寻找的方法。在主路由器中，侦听器：
this.listenTo( this.formsDataModelInst, 'change', this.render_home );
导致在键入registerview
时出现不希望出现的渲染loginview
问题。因为在registerview
keyup
上绑定到updateModels
，而这更改
同时包含registermodel
和formsDataModelInst
。此更改
触发上述写入事件，该事件将路由
s到登录视图
并呈现它
当FormsDataModelist
change
s的loginp
属性时，需要上述侦听器来决定在mainRouter
render
中实现哪个视图，而不是在其他属性（如在keyup
事件中更新的属性）中change
s
将其更改为：
this.listenTo( this.formsDataModelInst, 'change:loginp', this.render_home );
我在loginview和registerview中分别使用了this.undelegateEvents（）
方法，用于在一个视图中单击按钮时通过mainrouter路由到另一个视图render_login:function（e）{e.preventDefault（）；this.undelegateEvents（）；Backbone.history.navigate（“/login”，{trigger:true}）；}，
。通过主路由器的路由，此呈现过程调用了一个方法：render\u login:function（）{this.loginView=new loginView；this.loginView.render（）；}，
。但当我开始在任何输入字段中输入registerview时，loginview立即出现在屏幕上。基本上我说的是正确的：A）您有一个事件处理程序导致您看到的行为，B）该事件处理程序（可能）来自主干视图的实例，C）如果您断开该处理程序，也就是说，通过在相应的视图上调用undelegateEvents
，它将解决您的问题。除此之外，我建议您编辑您的问题，以包括LoginView
和RegisterView
类的代码，以及路由器的代码。如果不是不可能的话，我将很难帮助你。谢谢，我有一个听众正在收听FormsDataModelist，了解mainRouter中的更改。在register视图上，我键入更新的东西，方法更新了FormsDataModelist和registerModel。因此触发formsDataModel上绑定到更改的方法，这是上面主路由器的.render_home方法。除非loginp为true，否则此方法将路由回登录路由，因此呈现loginview。我已经将FormsDataModelist上的更改侦听器缩小到change:loginp。所以它起作用了。即使这样也奇怪地起作用了。即使是经过用户验证并呈现homeview的用户，如果在某个时间之后刷新页面并再次登录查看。然后重新刷新homeview。后来我写了listenTo s只监听同步事件并触发导航，而不是创建和渲染。