大佬教程收集整理的这篇文章主要介绍了jquery – 使用单个div作为多个骨干视图的容器,从而丢失事件绑定,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
例如:
NAV
<a href="#" class="dashabord_tab" id="widgets">Widgets</a> <a href="#" class="dashabord_tab" id="Foobars">Foobars</a>@H_404_16@dashboard_container.jst.tpl
<div id="nav"></div> <div id="current_tab"></div>@H_404_16@DASHABORDVIEW
DashboardView = BACkbone.View.extend({ template:JST.dashboard_container,render: function(){ $(this.el).html(this.template()); },activateWidgets: function(){ if(!(this.widgets_view)){ this.widgets_view = new WidgetsView(); this.widgets_view.render(); } $(this.el).find("#current_tab").html(this.widgets_view.el); },activateFoobars: function(){ if(!(this.foobars_view)){ this.foobars_view = new FooBarsView(); this.foobars_view.render(); } $(this.el).find("#current_tab").html(this.foobars_view.el); } });@H_404_16@问题:
因此,当我第一次切换到widgets_tab或foobar_tab时,选项卡会按预期加载.但是,如果我切换到选项卡,切换它,然后切换回它,我视图中的所有事件都不再绑定.点击,欢迎,foobars_view中的任何视图都不是可点击的,可以浏览的等等.
在过去,我一直在为每个子视图创建一个包装器,如下所示:
过去的解决方案,皮塔饼:
activateFoobars: function(){ $('.tab_wrapper').hide(); if($(this.el).find("#foobars_wrapper").length < 1){ $(this.el).append("<div class='tab_wrapper' id='foobars_wrapper'></div>"); this.foobars_view = new FooBarsView(); $(this.el).find("#foobars_wrapper").html(this.foobars_view.render().el); } $('#foobars_wrapper').show(); }@H_404_16@我宁愿不按照上面所示的方式去做,而且我真的很想把视图的el放在一个始终保持开放的active_tab div中…如果我不能按照我喜欢的方式去做to,有没有替代我上面展示的方式?谢谢!
.html(dom_object)
时:
$(this.el).find("#current_tab").html(this.widgets_view.el);@H_404_16@你实际上是这样做的:
$(this.el).find('#current_tab').empty().append(this.widgets_view.el);@H_404_16@和
empty
:
所以,一旦你将widgets_view添加到#current_tab然后再添加.html(this.foobars_view.el),widgets_view.el上的事件就会消失.您的.html调用第一次运行正常,因为#current_tab中没有任何内容,因此没有任何事件可以取消绑定.
您可以通过在混合中添加简单的
delegateEvents
调用来重新绑定事件来使用“重用视图”方法:
activateWidgets: function(){ if(!(this.widgets_view)){ this.widgets_view = new WidgetsView(); this.widgets_view.render(); } $(this.el).find("#current_tab").html(this.widgets_view.el); this.widgets_view.delegateEvents(); // <--------------- you need this }@H_404_16@当我在这里时,您可以使用
this.$('#current_tab')
而不是$(this.el).find(‘#current_tab’)和this.$el
而不是$(this.el).演示:http://jsfiddle.net/ambiguous/75KuW/1/
请注意,上面的切换标签会保留< input type =“text”>的内容.元素.如果您不需要这种行为,那么您可能最好根据需要删除和实例化视图,而不是保留所有视图并将它们交换进去.
此外,如果您的WidgetsView(和朋友)在其中包含其他BACkbone视图,则您必须在所包含的视图上一直调用delegateEvents.在这种情况下,视图上的某种bind_events方法是有意义的:
this.widgets_view.rebind_events(); // delegateEvents() all the way down this view subtree@H_404_16@
以上是大佬教程为你收集整理的jquery – 使用单个div作为多个骨干视图的容器,从而丢失事件绑定全部内容,希望文章能够帮你解决jquery – 使用单个div作为多个骨干视图的容器,从而丢失事件绑定所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。