Как сделать модальные диалоги с помощью Om или Reagent (и Bootstrap)

Question

Интересно, как показывать и скрывать модальный диалог с помощью Om или Reagent. Поскольку мой пользовательский интерфейс является функцией в состоянии, show/hide должен запускаться с помощью свойства в этом состоянии.

Но фреймворкам, таким как Bootstrap, требуется вызывать некоторые JavaScript для отображения/скрытия диалогов.

Есть ли общее решение этой проблемы?

Answer 1

Не используйте эффекты javascript или jquery для отображения/скрытия диалогов в Om или Reagent. Вместо этого введите значение atom, чтобы определить, должно ли отображаться модальное диалоговое окно. Вот пример для реагента:

[(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