Получение noUiSlider, работающего с реагентом?

Я пытаюсь получить noUiSlider для работы с reagent (особенно пример this), но я не могу этого сделать. Я загрузил версию javascript и css 9.2.0, которые я импортировал из своего HTML (я проверял, что он загружен), и мой внешний файл выглядит так (и он используется в Leiningen: :externs [..., "nouislider_extern.js"]):Получение noUiSlider, работающего с реагентом?

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)

Что я делаю неправильно?

источник

2017-02-21 Johan

Вы уверены, что вы добавили 'nouislider.js' в свой html? – akond

Ну афайк, по крайней мере, я вижу в Chrome, что скрипт загружен с сервера правильно – Johan

Это странно, потому что ваш пример работает для меня (после исправления некоторых синтаксических ошибок). Вы компилируете его в расширенном режиме или просто отлаживаете его с помощью figwheel и без оптимизации? – akond

Были проблемы с моим кодом выше (помимо очевидных ошибок вырезания и вставки). Ошибка, указанная в моем вопросе (Uncaught ReferenceError: noUiSlider is not defined), была связана с кэшированием. Были и другие проблемы, такие как отсутствие питания create-slider! с помощью узла dom. Поэтому для справки здесь приведен рабочий пример:

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

источник

2017-02-22 14:12:37 Johan

Получение noUiSlider, работающего с реагентом?

ответ

Смежные вопросы