让 noUiSlider 与 Reagent 一起工作？

Question

我正在尝试获取 noUiSlider to work with reagent (especially this 示例）但我没有这样做。我已经下载了从我的 HTML 导入的 javascript 和 css 的 9.2.0 版本（我已经验证它已下载）并且我的外部文件看起来像这样（并且它在 Leiningen 中使用：:externs [..., "nouislider_extern.js"]):

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

我做错了什么？

Answer 1

我上面的代码有几个问题（除了明显的剪切和粘贴错误）。我在问题 (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)))})))

让 noUiSlider 与 Reagent 一起工作？

Getting noUiSlider working with Reagent?

clojurescript

nouislider

reagent