Utilizzando discesa bootstrap con Om

Question

Questo è quello che ho:

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

Il problema è che una volta che la discesa è aperto, non nasconde più come dovrebbe essere quando si clicca su di essa o da qualche altra parte. Anche i tasti non funzionano. Credo che manchi qualcosa di importante qui, cosa potrebbe essere? Sto usando bootstrap 3.1.1 e jquery 1.11.0.

Grazie.

Answer 1

Ecco quello che faccio per creare un componente discesa:

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

Si nasconde quando dovrebbe. Io uso jQuery 1.11.1, Bootstrap 3.2.0 e sablono per chiarezza, ma ciò non influisce su nulla. Non penso che dovresti usare IDidMount per jQuery dato che tutta l'interazione viene gestita tramite il plugin JavaScript del dropdown di bootstrap (incluso nella libreria Bootstrap).

Answer 2

Un'altra opzione è utilizzare la libreria Om-Bootstrap che ho scritto; c'è un componente a discesa che gestisce tutto questo stato internamente per te.

La discesa diventa:

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

Il sito di documentazione a http://om-bootstrap.herokuapp.com ha esempi e frammenti di codice di come utilizzare tutti questi componenti.