使用 Om 有条件地向元素添加 Class

Question

在 Om 中，有没有办法根据主应用程序原子中的某个值向元素添加 class？

以下面的元素为例：

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

如果我以某种方式在 true 和 false 之间切换 :some-key 的值，则不会添加或删除 class。页面加载时 :some-key 的值决定是否添加 class。

我正在使用这个想法有条件地 show/hide（使用 Twitter Bootstrap 的 hide class）基于 [=16= 的值的菜单选项] 在我的应用状态中输入：

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

您应该使用关键字 :className 而不是 :class。

Answer 2

此代码按预期工作。当我单击 "Click Me!"，同时查看开发人员工具 (Chrome) 中的元素时，我看到 class 在 "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!。如果您仍然遇到问题，post 更新状态的代码。

注意：我是运行这个 Chestnut。

使用 Om 有条件地向元素添加 Class

Conditionally Add a Class to an Element with Om

reactjs

clojurescript

om