jquery.on("show.bs.modal", m.redraw) 破坏了对话框答案

【问题标题】：jquery.on("show.bs.modal", m.redraw) corrupts the dialogjquery.on("show.bs.modal", m.redraw) 破坏了对话框
【发布时间】：2017-01-29 12:48:53
【问题描述】：

我正在尝试将 Twitter Bootstrap 与 Mithril 一起使用。通常使用用 Mithril 包装的 Bootstrap 重绘对话框是可行的，但在 "show.bs.modal" 事件的处理程序中重绘会隐藏离开背景的对话框。即使使用setTimeout 也无法解决，它应该提供不同的执行上下文。为什么以及如何解决？

这是一个简单的 PoC。

要点：https://gist.github.com/173210/8c84966696276f1bfa3e298edb53da2b

Rawgit（工作演示）：https://rawgit.com/173210/8c84966696276f1bfa3e298edb53da2b/raw/34b0ac625962ee830d63829107eeb0473c735375/poc.html

简而言之，这是行不通的。

jquery.on("shown.bs.modal", () => setTimeout(m.redraw, 2000));

【问题讨论】：

标签： twitter-bootstrap twitter-bootstrap-3 jquery-plugins bootstrap-modal mithril.js

【解决方案1】：

m.redraw 仅适用于使用m.mount 或m.route 挂载的components。

我对您的代码进行了一些更改： https://jsbin.com/wegeyi/edit?js,output

如果我们把你的虚拟 DOM 代码放在一个组件视图中，并将m.render 更改为m.mount，我们可以将f 替换为m.redraw。
我添加了一个绘制计数器来指示代码正在按预期重新执行。
不是函数的DOM属性，如className、type等可以用m()表示selector argument

【讨论】：

谢谢，我对 PoC 进行了一些更改。但这并不能解决问题。
我认为问题在于您无法使setTimeout( m.redraw ) 工作。如果您查看the demo I put up，您会看到数字在 2 秒后增加（每次单击按钮时都会增加一次。缺少什么？

【解决方案2】：

已解决：m.render 覆盖 className，后者已被 $(element).modal("show") 更改，因此您必须防止这种情况发生。你有两个选择：

在$(element).modal("show") 之后获取className 并将其反映到模型中。
当initialized 为假时，在config 中设置className。

我选择2。如下所示：

m("div", {
  config(element, initialized) {
    if (!initialized) {
      element.className = "modal fade";
      $(element)
        .on("shown.bs.modal", () => setTimeout(m.redraw, 2000))
        .modal("show");
    }
  }
}, conentOfTheModalDialog);

【讨论】：