Wie kann noUiSlider mit dem Reagenz arbeiten?

Ich versuche noUiSlider mit reagent (vor allem this Beispiel) zu arbeiten, aber ich versäume es. Ich habe die 9.2.0 Version des Javascript und CSS heruntergeladen, die ich aus meinem HTML importiere (ich habe überprüft, dass es heruntergeladen wird) und meine externe Datei sieht so aus (und es wird in Leiningen verwendet:Wie kann noUiSlider mit dem Reagenz arbeiten?

var noUiSlider = {}; 

noUiSlider.create = function(node, params){}; 

noUiSlider.destroy = function() {}; 

noUiSlider.on = function(event, cb) {}; 

noUiSlider.get = function() {}; 

noUiSlider.set = function(val) {};

ist My-Komponente wie folgt definiert:

(defn- create-slider! [start step min max node] 
    (js/noUiSlider.create 
    node 
    (js-obj 
     "start" start 
     ;"connect" connect 
     "step" step 
     "range" (js-obj "min" min 
         "max" max)))) 

(defn- home-render [] 
    [:div {:id "slider-date"}]) 


(defn nouislider-comp 
    [] 
    (fn [] 
    (reagent/create-class {:reagent-render  home-render 
          :component-did-mount (partial create-slider! 
                 (clj->js [(.getTime (js/Date. "2011")), (.getTime (js/Date. "2015"))]) 
                 7 * 24 * 60 * 60 * 1000 
                 (.getTime (js/Date. "2010")) 
                 (.getTime (js/Date. "2010")))})))

Aber wenn create-slider! genannt wird wirft er einen Fehler:

Uncaught ReferenceError: noUiSlider is not defined 
    at Function.myapp$components$nouislidercomp$create_slider_BANG_ (date_slider_range.cljs:36) 
    at Function.cljs.core.apply.cljs$core$IFn$_invoke$arity$5 (core.cljs:3706) 
    at Constructor.G__9299__delegate (core.cljs:4099) 
    at Constructor.G__9299 (core.cljs:4099) 
    at Constructor.reagent$impl$component$custom_wrapper_$_componentDidMount [as componentDidMount] (component.cljs:188) 
    at ReactCompositeComponentWrapper.invokeComponentDidMountWithTimer (react.inc.js:5739) 
    at CallbackQueue.notifyAll (react.inc.js:839) 
    at ReactReconcileTransaction.close (react.inc.js:13064) 
    at ReactReconcileTransaction.closeAll (react.inc.js:16276) 
    at ReactReconcileTransaction.perform (react.inc.js:16223)

Was mache ich falsch?

Quelle

2017-02-21 Johan

Sind Sie sicher, dass Sie 'nouislider.js' zu Ihrem HTML hinzugefügt haben? – akond

Gut affaict, zumindest sehe ich in Chrome, dass das Skript korrekt vom Server heruntergeladen wird. – Johan

Das ist seltsam, weil Ihr Beispiel für mich funktioniert (nachdem einige Syntaxfehler behoben wurden). Kompilieren Sie es im erweiterten Modus oder debuggen Sie es nur mit figwheel und ohne Optimierung? – akond

Es gab mehrere Probleme mit meinem Code oben (neben offensichtlichen Ausschneiden und Einfügen Fehler). Der Fehler, den ich in meiner Frage (Uncaught ReferenceError: noUiSlider is not defined) angegeben habe, war auf Caching zurückzuführen. Es gab auch andere Probleme, wie beispielsweise create-slider! nicht mit einem Dom-Knoten zu versorgen. Also als Referenz hier ist ein funktionierendes Beispiel:

(defn- create-slider! [start step min max node] 
    (js/noUiSlider.create 
    node 
    (js-obj 
     "start" start 
     "step" step 
     "range" (js-obj "min" min 
         "max" max)))) 

(defn home-render [] 
    [:div {:id "slider-date"}]) 

(defn date-slider-range-comp 
    [] 
    (fn [] 
    (reagent/create-class {:reagent-render  home-render 
          :component-did-mount (fn [node] 
                (create-slider! 
                (clj->js [(.getTime (js/Date. "2011")) (.getTime (js/Date. "2015"))]) 
                (* 7 24 60 60 1000) 
                (.getTime (js/Date. "2010")) 
                (.getTime (js/Date. "2017")) 
                (reagent/dom-node node)))})))

Quelle

2017-02-22 14:12:37 Johan

Wie kann noUiSlider mit dem Reagenz arbeiten?

Antwort

Verwandte Themen