使用Om的bootstrap下拉列表

Question

这就是我所拥有的:

(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")))))))

问题是,一旦打开下拉列表,它就不再隐藏了,因为当它点击它或其他地方时应该是这样.击键也不起作用.我相信这里缺少一些重要的东西,它会是什么？我正在使用bootstrap 3.1.1和jquery 1.11.0.

谢谢.

Answer 1

这是我创建下拉组件的方法:

(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])]]])))

它隐藏在应有的时候.为清晰起见,我使用jQuery 1.11.1,Bootstrap 3.2.0和sablono,但这并不影响任何事情.我认为您不应该将IDidMount用于jQuery,因为所有交互都是通过bootstrap的dropdown JavaScript插件(包含在Bootstrap库中)来处理的.