用打字稿

Question

我正在使用Aurelia和bootstrap来显示要求确认清除表单详细信息的模式。我为此创建了plunker link。如何在不使用引导程序提供的JQuery来触发事件来关闭模态的情况下隐藏引导模式？我在下面尝试隐藏模态，这是有效的。但是当你想再次显示时，打破模态。

document.getElementById("confirmationRequired").style.display = 'none';

当我尝试点击清除btn时，我收到以下错误。

Answer 1

我理解（并分享）您的偏好，尽可能避免使用JQuery，但是当您正在使用JQuery组件时，船已经有了航行......： - ）

要回答你的问题（并说明为什么在使用JQuery时很难避免使用JQuery），这里有两种方法可以隐藏它＆＃34;普通的JS＆＃34;：

1。复制bootstrap's Modal.hide()：

中的代码

正如您所看到的，除了应用hide样式之外，它还有很多其他功能。这就是为什么它不起作用。

＆＃13;

＆＃13;

if (event) {
  event.preventDefault()
}

if (this._isTransitioning || !this._isShown) {
  return
}

const hideEvent = $.Event(Event.HIDE)

$(this._element).trigger(hideEvent)

if (!this._isShown || hideEvent.isDefaultPrevented()) {
  return
}

this._isShown = false
const transition = $(this._element).hasClass(ClassName.FADE)

if (transition) {
  this._isTransitioning = true
}

this._setEscapeEvent()
this._setResizeEvent()

$(document).off(Event.FOCUSIN)

$(this._element).removeClass(ClassName.SHOW)

$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)


if (transition) {
  const transitionDuration  = Util.getTransitionDurationFromElement(this._element)

  $(this._element)
    .one(Util.TRANSITION_END, (event) => this._hideModal(event))
    .emulateTransitionEnd(transitionDuration)
} else {
  this._hideModal()
}

＆＃13;

＆＃13;

＆＃13;

我之前尝试过类似的事情，并且在得出结论我应该让图书馆处理它之后，通常最终会抛出一个晚上的工作（弄清楚并将所有依赖关系捆绑在一起）。

不要说这完全是浪费时间。这样做有助于您更好地了解这些库的工作原理，从长远来看最终可以节省时间，因为API可以减少您的意外。

2。手动调用Modal.hide()

这涉及在元素上找到正确的jQuery对象，获取所需的对象实例，然后在其上调用适当的方法。这是一种快速肮脏的方法：

const el = document.getElementById("confirmationRequired");
const modal = Object.getOwnPropertyNames(el)
    .filter(n => n.startsWith("jQuery"))
    .map(n => e[n]["bs.modal"])
    .find(j => j !== undefined);

modal.hide();

或者..

我只是使用jQuery做同样的事情，但代码更少，更可靠。

正如jesse已经指出的那样，aurelia-dialog是你要避免使用JQuery的方法。有一个学习曲线，但一旦掌握了它，它就是一个非常简洁的图书馆。

有人可能会争辩说：为什么不仅仅使用引导程序中的CSS手动滚动自己的模态逻辑来设置对话框的样式？模态只是两个简单的部分：

• 具有阴影和正z-index的固定屏幕填充元素，当模态处于活动状态时，应用程序的其余部分无法点击。只需使用CSS显示/隐藏它。

• 普通表格元素，固定且居中，z-index高于屏幕填充符。你可以把它变成一个自定义元素并保持它非常简单，让它通过EventAggregator进行交流，这样你就不需要用紧密耦合的绑定做任何巫术。

添加一些事件处理程序，例如esc，然后点击模式外部作为关闭它的替代方案，你就会变得金黄。