[编辑:我通过调用delegateEvents()解决了早期的问题,但不应该这样做.重新发布更多信息.]
我有一个View,当渲染时它上面有一个登录按钮并附加了一个点击事件.首先渲染所有工作:单击按钮,成功调用ajax后,登录提示消失,并显示欢迎视图(LoggedInView).但是,如果我稍后导航回此视图(#foo),UI呈现但事件关联消失,而无需通过调用delegateEents()手动强制解决问题.
发生了什么事,我的事件没有重新关联自己?
LoginView = Backbone.View.extend({
template: _.template($("#loginTemplate").html()),
initialize: function(stuff,router) {
_.bindAll(this,'render','rc','gotProfile');
this.model.bind("rc",this.rc)
this.router = router;
},
events: {
'click .loginButton': 'login'
},
render: function() {
$(this.el).html(this.template(this.model.toJSON()));
$(this.el).find(".actionButton").button(); // Button
// this.delegateEvents(this.events); // NEEDED! Re-wire events on re-render
return this;
},
rc: function(code) {
switch(code) {
case errCodes.USER_NOT_FOUND: this.notFound(); break;
case errCodes.OK: this.loginOk(); break;
default: this.otherErr(); break;
}
},
login: function() {
clearErrors( $('[rel="req"]') );
var okReq = validate( $('#login [rel="req"]'), validateReq );
var okEmail = validate( [$('#uid')], validateEmail ); …Run Code Online (Sandbox Code Playgroud) 我把我的头发拉出来,除非我做了最荒谬的事情,否则在重新渲染视图之后似乎无法让鼠标事件在我的骨干视图上工作:
$("a").die().unbind().live("mousedown",this.switchtabs);
Run Code Online (Sandbox Code Playgroud)
我实际上已经在那里但是决定更新到最新的主干并尝试使用新delegateEvents()功能.
这是我的项目ID结构的方式:
Appview / AppRouter
|
----->PageCollection
|
------->PageView/PageModel
------->PageView/PageModel these page view/models are not rendered
------->PageView/PageModel
|
------->PageView/PageModel
|
----->render() *when a pageview is rendered*
|
-----> Creates new
Tabcollection
|
--->TabModel/TabView <-- this is where the issue is
Run Code Online (Sandbox Code Playgroud)
会发生的事情是tabcollection有一个主tabview来管理所有选项卡,然后为每个选项卡创建一个新的模型/视图,并在每次加载选项卡时让监听器重新呈现tabview.如果tabview被重新渲染,除非我把那个有人工作的jQuery语句放在那里,否则没有任何鼠标事件可以工作.
下面是tabview并渲染(我已经将它剥离了很多)
var TabPanelView = Backbone.View.extend({
className: "tabpanel",
html: 'no content',
model: null,
rendered: false,
events:{
'click a.tab-nav': 'switchtabs'
},
initialize: function(args)
{
this.nav = $("<ol/>");
this.views = args.items;
this.className = args.classname?args.classname:"tabpanel";
this.id = args.id;
this.container …Run Code Online (Sandbox Code Playgroud) javascript jquery javascript-events backbone.js underscore.js