Om

2014-07-12 20 views
8

ile önyükleme açılır menüsünü kullanarak Bu benim ne var: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"))))))) 

sorun açılır açıldığında bir kez onu başka bir yerde tıkladığında veya olması gerektiği gibi, artık gizlemek olmamasıdır. Ayrıca tuş vuruşları çalışmıyor. Burada önemli bir şeyin eksik olduğuna inanıyorum, ne olabilir? Bootstrap 3.1.1 ve jquery 1.11.0 kullanıyorum.

Teşekkürler. ne zaman olması gerektiği

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

O gizler:

cevap

8

Burada bir açılan bileşeni oluşturmak için böyle yapar. Açıklık için jQuery 1.11.1, Bootstrap 3.2.0 ve sablono kullanıyorum ama bu hiçbir şeyi etkilemez. JQuery için IDidMount kullanmanız gerektiğini düşünmüyorum, çünkü tüm etkileşim bootstrap'in dropdown JavaScript eklentisi (Bootstrap kütüphanesinde bulunan) ile ele alındığından.

+0

Teşekkürler Anna! Haklısın, IDidMount'a ihtiyacım yok. Ama ayrıca tüm zaman boyunca yanlış yapıyordum. ReactJs'in kongre sonrasında aşağıdakileri deniyordum: dataToggle yerine: data-toggle. Thats neden veri öznitelikler yerine javascript dayanıyordu (bu yüzden IDidMount) ... – roboli

+1

Her şey Om dünyasında kebap durumda :-) –

+0

@AnnaPawlicka Oldukça "her şey" kebab-case değil:: className ve: onClick (rağmen ben yazmamı sağlayan om-araçları kullan: class and: on-click :-P) – Dan

4

Başka bir seçenek, yazdığım Om-Bootstrap kitaplığını kullanmak; Bu durumu sizin için dahili olarak ele alan bir açılır kapanır bileşeni var.

açılır haline gelir: http://om-bootstrap.herokuapp.com de

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

dokümantasyon site örneklerini ve bu bileşenlerin hepsi nasıl kullanılacağına ilişkin kod parçacıklarını sahiptir.