Question

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

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

这个问题有什么共同的解决方案吗？

Answer 1

不要使用javascript或jquery效果来显示/隐藏Om或Reagent中的对话框。相反，使 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"]]])))

从中获取布尔值以及如何对其进行更新将取决于特定的应用程序，但是希望这足以证明这个想法。

如何使用Om或Reagent（和Bootstrap）进行模态对话

3 个答案: