Mit Bootstrap-Drop-Down mit Om

Question

Das ist, was ich habe:

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

Das Problem ist, dass, sobald das Dropdown geöffnet ist, es nicht mehr nicht verstecken, wie es sein soll, wenn man darauf klickt oder woanders. Auch Tastenanschläge funktionieren nicht. Ich glaube, hier fehlt etwas Wichtiges, was könnte es sein? Ich verwende bootstrap 3.1.1 und jquery 1.11.0.

Danke.

Answer 1

Hier ist, was ich tun, um eine Drop-Down-Komponente zu erstellen:

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

Es versteckt, wenn es sein sollte. Ich benutze jQuery 1.11.1, Bootstrap 3.2.0 und sablono für Klarheit, aber das betrifft nichts. Ich denke nicht, dass Sie IDidMount für jQuery verwenden sollten, da die gesamte Interaktion über das Bootstrap-Drop-down-JavaScript-Plugin (das in der Bootstrap-Bibliothek enthalten ist) gehandhabt wird.

Answer 2

Eine andere Option ist die Om-Bootstrap Bibliothek, die ich schrieb; Es gibt eine Dropdown-Komponente, die diesen gesamten Status intern für Sie verarbeitet.

Die Drop-Down wird:

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

Die Dokumentation Website unter http://om-bootstrap.herokuapp.com hat Beispiele und Code-Schnipsel, wie alle diese Komponenten zu verwenden.