Twitter bootstrap 3 在Om中使用引导下拉列表

这就是我所拥有的：

(defn view [cursor owner]
  (reify
    om/IDidMount
    (did-mount [_]
      (-> (js/$ ".dropdown-toggle")
          (.dropdown)))

    om/IRender
    (render [_]
      (dom/div #js {:className "dropdown"}
               (dom/button #js {:className "btn btn-default dropdown-toggle"
                                :type "button"
                                :id "dropdownMenu1"} "Dropdown" (dom/span #js {:className "caret"}))
               (dom/ul #js {:className "dropdown-menu"
                            :role "menu"
                            :ariaLabelledby "dropdownMenu1"}
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Action"))
                       (dom/li #js {:role "presentation"}
                               (dom/a #js {:role "menuitem"
                                           :tabIndex "-1"
                                           :href "#"} "Another action")))))))

问题是，一旦下拉列表打开，它就不再像单击它或其他地方时那样隐藏。而且按键也不起作用。我相信这里遗漏了一些重要的东西，可能是什么？我正在使用Bootstrap3.1.1和jQuery1.11.0

---

谢谢。

以下是创建下拉组件的步骤：

(defn dropdown [cursor owner {:keys [id text values]}]
 (om/component
   (html
     [:div.dropdown
       [:button {:type "button"
                 :class "btn dropdown-toggle"
                 :data-toggle "dropdown"
                 :id id}
                text
                [:span {:class "caret"}]]
       [:ul {:class "dropdown-menu" :role "menu" :aria-labelledby id}
         [:li {:role "presentation"}
           (for [v values] 
             [:a {:role "menuitem" :tabIndex "-1" :href "#"} v])]]])))

---

它会在应该的时候隐藏起来。为了清晰起见，我使用jQuery1.11.1、Bootstrap3.2.0，但这并不影响任何事情。我认为您不应该使用IDidMount for jQuery，因为所有交互都是通过bootstrap的下拉JavaScript插件（包含在bootstrap库中）处理的。

另一个选择是使用我编写的库；有一个下拉组件，可以在内部为您处理所有这些状态

下拉列表变为：

(:require [om-bootstrap.button :as b])

(b/toolbar
 {}
 (for [title ["Default" "Primary" "Success" "Info" "Warning" "Danger" "Link"]
       :let [style (.toLowerCase title)]]
   (b/dropdown {:bs-style style, :title title}
               (b/menu-item {:key 1} "Action")
               (b/menu-item {:key 2} "Another action")
               (b/menu-item {:key 3} "Something else here")
               (b/menu-item {:divider? true})
               (b/menu-item {:key 4} "Separated link"))))

---

位于的文档站点提供了如何使用所有这些组件的示例和代码片段。

谢谢！你说得对，我不需要IDidMount。但我也一直在做错事。按照ReactJs的约定，我尝试使用：dataToggle而不是：data toggle。这就是为什么我依赖javascript而不是数据属性（因此IDidMount）…Om world中的一切都是烤肉串大小写：-）@Annapwlicka并不完全“一切”都是烤肉串大小写：：className和：onClick（尽管我使用Om工具，它允许我编写：class和：on click:-P）她使用的是sablono，它也规范化了名称：