Условно добавить класс к элементу с помощью Om

Question

В Om, есть ли способ добавить класс к элементу на основе некоторого значения в главном атоме приложения?

Возьмите следующий элемент, например:

(defn some-component [app owner]
  (reify
    om/IRender
    (render
      [_]
      (html
        [:div {:class (when (:some-key app) "awesomeclass")} "Some text!"])))) 

Если я как-то переключаю значение :some-key между истиной и ложью класс не добавляется и не удаляется. Значение :some-key при загрузке страницы определяет, будет ли добавлен класс.

Я использую эту идею, чтобы условно показать / скрыть (используя Twitter Bootstrap's hide класс) пункты меню, основанные на значении :access введите состояние моего приложения:

[:ul.dropdown-menu {:role "menu"}
  [:li {:class (when (:access app) "hide")} [:a.pointer {:on-click #(om/update! app :view :login)} "Login"]]
  [:li {:class (when (:access app) "hide")} [:a.pointer {:on-click #(om/update! app :view :register)} "Register"]]
  [:li {:class (when-not (:access app) "hide")} [:a.pointer {:on-click #(om/update! app :view :dashboard)} "Dashboard"]]
  [:li {:class (when-not (:access app) "hide")} [:a.pointer {:on-click #(om/update! app :view :settings)} "Settings"]]
  [:li [:a.pointer {:on-click #(om/update! app :view :about)} "About"]]]

Answer 1

Этот код работает как положено. Когда я нажимаю "Click Me!", Глядя на элементы в инструментах разработчика (Chrome), я вижу, что класс переключается между "awesomeclass" и исчезает:

 (defonce app-state (atom {:some-key true}))

 (defn main []
   (om/root
     (fn [app owner]
       (reify
         om/IRender
         (render [_]
           (html
            [:div {:class (when (:some-key app) "awesomeclass")}
             "Some text!"
             [:a {:on-click #(om/transact! app :some-key not)}
              "Click Me!"]]))))
     app-state
     {:target (. js/document (getElementById "app"))}))  

Как указал rojoca, проблема может заключаться в том, как вы обновляете app-stateрассмотрите возможность использования om/transact! а также om/update!, Если проблемы продолжаются, опубликуйте код, который обновляет состояние.

Примечание: я запускаю это в Каштане.

Answer 2

Вы должны использовать ключевое слово :className вместо :class,