2017-02-21 3 views
1

reagent(特にthisの例)で動作するようにnoUiSliderを取得しようとしていますが、失敗します。私は自分のHTMLからダウンロードしたjavascriptとcssの9.2.0バージョンをダウンロードしました。ダウンロードしたことを確認しました。私のexternファイルは次のようになっています(Leiningen::externs [..., "nouislider_extern.js"]で使用されています):試薬を使用しているNoSuiderを取得するには?

var noUiSlider = {}; 

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

noUiSlider.destroy = function() {}; 

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

noUiSlider.get = function() {}; 

noUiSlider.set = function(val) {}; 

私のコンポーネントは次のように定義されています。

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

しかしcreate-slider!が呼ばれたとき、それはエラースロー:

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) 

私が間違っているのは何を?

+0

あなたのhtmlに 'nouislider.js'を追加してもよろしいですか? – akond

+0

さて、少なくとも私はChromeでスクリプトがサーバから正しくダウンロードされていることを確認しています。 – Johan

+1

あなたの例が(構文エラーを修正した後で)私のために働くので、それは奇妙です。あなたはそれを高度なモードでコンパイルしていますか、またはfigwheelで最適化せずにデバッグしていますか? – akond

答えて

0

上記の私のコードにはいくつかの問題がありました(明らかなカットアンドペーストのエラーに加えて)。私の質問(Uncaught ReferenceError: noUiSlider is not defined)で述べたエラーは、キャッシングによるものでした。ドームノードにcreate-slider!を供給しないなどの他の問題もありました。参考のために参考にしてください:

(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)))}))) 
関連する問題