我对backbone.js 很陌生,但是我们开始在前端使用越来越多的JS,我想使用一些框架来提供代码结构——主干似乎适合我们的需求。
所以从一个非常简单的测试应用程序开始,它使用 jquery-ui 启动一个对话窗口。我遇到的问题是,由于 jquery-ui 在主干使用的原始模板周围添加了一个包装器 DIV,因此事件不再触发。
我不想使用 jquery-ui 事件模型,因为我宁愿只使用一个 - 如何将主干绑定到这个新结构?
我对backbone.js 很陌生,但是我们开始在前端使用越来越多的JS,我想使用一些框架来提供代码结构——主干似乎适合我们的需求。
所以从一个非常简单的测试应用程序开始,它使用 jquery-ui 启动一个对话窗口。我遇到的问题是,由于 jquery-ui 在主干使用的原始模板周围添加了一个包装器 DIV,因此事件不再触发。
我不想使用 jquery-ui 事件模型,因为我宁愿只使用一个 - 如何将主干绑定到这个新结构?
看起来好像调用_.template()
实际上是在一个额外的 div 中进行包装。绑定了事件的父 div 被附加到#well
. 一个简单的解决方法是在获取具有模型类 ID 的元素的结果上调用 .parent()。例如见这里
_ 文档中的一些信息很可能也能更清楚地说明这个问题。
好的 - 在这个项目结束时,我终于意识到我没有回答这个问题。当您使用 JQueryUI 创建一个 .dialog 时会发生什么,它实际上分离了您的原始 DOM 元素并将其移动到包装在它自己的 JQueryUI 标记中的 DOM 的底部,以将其变成一个对话框。
由于 Backbone 视图的元素现在已被移动,因此 Backbone 不会拾取任何触发的事件,因为它发生在它自己的“视图”之外。
所以你要做的是重新分配视图的元素:
var dlg = this.$("#dialogue-properties").dialog({ ..});
this.setElement(dlg);
视野在哪里this
。这是在initialize
方法内完成的
您可以在视图中创建 div 包装器并对其内容进行模态化,如此处所述(文章的第一部分)
cocovan在他的回答中很好地解释了这个问题。但是,至于解决方案,JQuery UI 团队实际上在 2012 年底添加了一个方法(允许对话框附加到 body 以外的元素)来处理这个问题。
它是appendTo(selector)
方法(jQuery Dialog appendTo 方法)。因此,只需指定要将对话框附加到哪个元素。