jquery.on("show.bs.modal", m.redraw) портит диалог

Question

Я пытаюсь использовать Twitter Bootstrap с Mithril. Обычно перерисовывает диалог с Bootstrap, завернутым с Mithril, работает, но перерисовывается в обработчике для "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));

Answer 1

m.redraw работает только для компонентов, которые были установлены с m.mount или же m.route,

Я сделал несколько изменений в вашем коде: https://jsbin.com/wegeyi/edit?js,output

• Если мы поместим ваш виртуальный код DOM в представление компонентов, и изменим m.render в m.mount мы можем заменить f с m.redraw,
• Я добавил счетчик отрисовки, чтобы указать, что код выполняется повторно, как и ожидалось.
• Атрибуты DOM, которые не являются функциями, например className, type и т. д. можно выразить в m() аргумент селектора

Answer 2

Решено: m.render перезаписывает className, который был изменен $(element).modal("show")так что вы должны предотвратить это. У вас есть два варианта:

1. Получить className после $(element).modal("show") и отразить это на модели.
2. Задавать className в config когда initialized ложно

Я выбираю 2. Это выглядит следующим образом:

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