2

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

以以下元素为例：

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

如果我以某种方式在真假之间切换值:some-key，则不会添加或删除该类。on page load的值:some-key决定是否添加该类。

我正在使用这个想法根据我的应用程序状态hide中的键值有条件地显示/隐藏（使用 Twitter Bootstrap 的类）菜单选项：: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"]]]
4

2 回答 2

3

此代码按预期工作。当我单击“单击我！”时，在查看开发人员工具 (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!and om/update!。如果您仍然遇到问题，请发布更新状态的代码。

注意：我在Chestnut中运行它。

于 2015-01-16T02:21:18.073 回答
0

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

于 2015-01-15T22:17:20.467 回答