Question

我正在尝试noUiSlider使用reagent（尤其是this示例），但我没有这样做。我已经下载了从我的HTML导入的javascript和css的9.2.0版本（我已经验证它已下载），我的extern文件看起来像这样（它在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$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)

我做错了什么？

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合作？

1 个答案: