如何使用Om或Reagent (和Bootstrap)进行模式对话

Question

我想知道如何使用Om或Reagent实现模式对话框的显示和隐藏。因为我的UI是状态上的函数，所以显示/隐藏应该由处于此状态的属性触发。

但是像Bootstrap这样的框架需要调用一些JavaScript来显示/隐藏对话框。

对于这个问题有什么通用的解决方案吗？

Answer 1

不要在Om或Reagent中使用javascript或jquery效果来显示/隐藏对话框。相反，使atom的值确定模式对话框是否应该显示为。下面是Reagent的一个例子：

[(fn [shown]
       (if shown
        [:div.jumbotron.modal-background 
          {:on-click #(reset! popup-shown false)} 
          [:div.alert.alert-info
            [:div "Hello!"]]]
        [:div]))
   @popup-shown]

Answer 2

看看re-com。它无疑展示了一种方法。https://github.com/Day8/re-com

Answer 3

特别是对于Bootstrap，JavaScript将"show“添加到模式的类中，并将style="display: block;"添加到模式中。通过将这些添加到模式中，我们可以强制它一直显示，然后我们可以使用条件渲染来隐藏它：

(defn my-modal []
    (let [show @(app-state/query :modal-showing)]
      (when show
          [:div.modal.show {:tabIndex -1
                            :style {:display "block"}}
            [:div.modal-dialog
              [:div.modal-content
                "etc"]]])))

你从哪里得到你的show boolean，以及它是如何更新的，这将是特定于应用程序的，但希望这足以演示这个想法。