如何在 Meteor 上保留引导下拉状态答案

【问题标题】：How to preserve bootstrap dropdown state on Meteor如何在 Meteor 上保留引导下拉状态
【发布时间】：2013-01-17 16:52:57
【问题描述】：

每个表格行都有一个引导下拉按钮。
单击下拉菜单时，它会显示一个带有一些输入字段的小表单。
当用户提交此表单数据或该行被重绘时，下拉菜单关闭。

我尝试使用Template.preserve() 方法保留下拉状态，类似于输入但没有成功。

有人建议在下拉列表周围使用{{#constant}} 指令。我在表单中也有一些需要重新渲染的反应性内容，所以这个选项不适合我。

【问题讨论】：

您不会在单击按钮时发出页面重新加载，是吗？如果是这样，请看这里如何解决这个问题：stackoverflow.com/questions/14191644/…
所有提交事件都被stopPropagation()和preventDefault()“停止”，只是为了确定。但是 submit 会对行集合进行更改，从而在之后重新渲染它。我注意到每次重新渲染时都会删除下拉列表中的开放类。这就是问题所在。我无法找到一种方法来“隔离”这个标签而不是它的孩子被重绘。我试过 {{#isolate}} 没有成功。

标签： drop-down-menu twitter-bootstrap meteor

【解决方案1】：

我注意到反应式模板存在这个问题，但我知道没有好的解决方案。这有点像黑客，但它有效。

选项 1 手动向下拉列表中添加和删除 CSS 类。使用会话变量来保存下拉菜单的状态。

这应该是下拉菜单的默认状态...class="dropdown" 当用户单击下拉列表时，使用会话变量保存其状态并将“打开”添加到 HTML 类属性。 class="dropdown open" 当用户关闭下拉菜单时，删除“打开”

选项 2： 1. 用户点击下拉按钮。 2. 使用会话变量将下拉按钮 ID 保存为活动状态。 3. 使用以下回调重新打开您的下拉菜单...Template.myTemplate.rendered = function ( ) { if (dropdown = active) { $().dropdown('toggle'); //instead of toggle try 'open' } }

我还没有尝试过使用下拉菜单，但我遇到了同样的问题，每次模板保持渲染时模态框都会消失。我尝试了第二个选项，但效果不是很好。我最终使用了类似第一个选项的方法来解决问题，并且效果很好。

【讨论】：