如何将backbone.js事件绑定到JQuery UI对话窗口?

amrnrhlw  于 2022-11-10  发布在  jQuery
关注(0)|答案(4)|浏览(133)

我对backbone.js很陌生,但是我们开始在前端使用越来越多的JS,我想使用一些框架来给予代码结构-- backbone似乎适合我们的需要。
所以从a very simple test app开始,它使用jquery-ui启动一个对话框窗口。我遇到的问题是,由于jquery-ui在 Backbone.js 使用的原始模板周围添加了一个 Package 器DIV,事件不再触发。
我不想使用jquery-ui事件模型,因为我宁愿只使用一个-我如何将 Backbone.js 绑定到这个新的结构?

798qvoo8

798qvoo81#

看起来好像对_.template()的调用实际上是在一个额外的div中进行 Package 。绑定了事件的父div被保留在#well后面。一个简单的解决方案是在获得具有模型类ID的元素的结果上调用.parent()。例如,请参见here
文档中很可能有一些信息也会对这个问题有更多的了解。

brtdzjyr

brtdzjyr2#

在这个项目的最后,我终于意识到我还没有回答这个问题。当你用JQueryUI创建一个.dialog时,它实际上分离了你原来的DOM元素,并将其移动到DOM的底部, Package 在它自己的JQueryUI标记中,将其转换为一个对话框。
由于 Backbone.js 视图的元素现在已经被移动,所以 Backbone.js 不会拾取任何触发的事件,因为就它而言,它发生在它自己的“视图”之外。
因此,您需要重新分配视图的元素:

var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);

其中,this是视图。这是在initialize方法中完成的

kqqjbcuj

kqqjbcuj3#

您可以在视图中创建div Package 器,并对其内容进行模态处理,如here (first part of the post)所述

zpjtge22

zpjtge224#

cocovan在他的回答中很好地解释了这个问题。然而,至于解决方案,JQuery UI团队实际上在2012年年底添加了一个方法(Allow dialog to be attached to a element other than body)来处理这个问题。

它是appendTo(selector)方法(jQuery Dialog appendTo方法),因此只需指定要将对话框追加到哪个元素即可。

相关问题