标签: reagent

在我正在构建的小应用程序中使用Reagent和Re-frame我正在使用多方法来调度哪个页面应该根据app状态中的值显示:

(defmulti pages :name)

(defn main-panel []
  (let [current-route (re-frame/subscribe [:current-route])]
    (fn []
      ;...
      (pages @current-route))))

然后我有方法,如:

(defmethod layout/pages :register [_] [register-page])

在register-page功能会产生实际的观点:

(defn register-page []
  (let [registration-form (re-frame/subscribe [:registration-form])]
    (fn []
      [:div
       [:h1 "Register"]
       ;...
       ])))

我尝试更改我的应用程序,以便方法直接生成页面,如:

(defmethod layout/pages :register [_]
  (let [registration-form (re-frame/subscribe [:registration-form])]
    (fn []
      [:div
       [:h1 "Register"]
       ;...
       ])))

这导致没有任何页面被渲染.在我的主面板中,我将调用更改pages为方括号,以便Reagent可以看到它:

(defn main-panel []
  (let [current-route (re-frame/subscribe [:current-route])]
    (fn []
      ;...
      [pages @current-route])))

这导致第一个访问过的页面工作,但在此之后,单击链接(导致当前路由更改)无效.

在首先加载的文件中需要定义各个方法的所有命名空间,其中包含init函数,以及我可以选择任何单个页面并显示它的事实证明代码正在加载(然后,切换到另一个页面没有工作):

https://github.com/carouselapps/ninjatools/blob/master/src/cljs/ninjatools/core.cljs#L8-L12

在努力调试这是怎么回事,我定义了两个路线,:about以及 …

我正在尝试将初始焦点设置在输入元素上

(defn initial-focus-wrapper [element]
  (with-meta element
    {:component-did-mount #(.focus (reagent/dom-node %))}))

(defn chat-input []
  (fn []
    [initial-focus-wrapper
      [:input {:type "text"}]]))

这不适合我.我究竟做错了什么？

给出以下代码:

  [:input {:type "text"
           :value (:text @app-state)
           :on-change (fn [e]
                        (if (= 31 (.-keyCode e))
                          (println "ENTER")
                          (println "NOT ENTER")))}]

如何更改if条件以便输入按键可以与普通键区分开来？e除了target似乎为null 之外的所有属性.

我从这里复制了一份两年前的要点.它现在正在使用Figwheel并使用更新版本的Reagent/React.我正在寻找一种隔离来自Javascript控制台的警告消息的通用方法:Warning: Every element in a seq should have a unique :key.我们的想法是在:key所有组件中添加一个生成的唯一值.然后消息应该消失,我将能够看到哪些组件需要唯一的:key.我的问题是,尽管:key所有这些都被放入了一个唯一的,但仍然可以看到警告信息.

所以 - 有人能够告诉我我错过了哪个组件或者我做错了什么？正如可以从看到源(永久)我已经添加:key (gen-key)到这两种组分:[:polyline {:key (gen-key) ...和[:svg {:key (gen-key) ...分别在线43和68.

编辑所以这就是答案(永久链接),无论如何都是代码.只需查看第^{:key (gen-key)}44和60行的位置.

请注意,该功能gen-key是为调试而设计的.自然键要更换.

这是您可以实现的方式gen-key:

(defn gen-key []
  (gensym "key-"))

这是在上面的链接中完成的方式:

(def uniqkey (atom 0))
(defn gen-key []
  (let [res (swap! uniqkey inc)]
    (u/log res)
    res))

我有一些带有反应组件抽象的外部UI,我想从试剂中重用它们,有没有办法直接渲染预定义的反应组件,只需从clojurescript传递数据.我是一个clojurescript初学者.

我正在从我的Reagent应用程序执行Ajax GET,从数据库加载一些东西.

我不完全确定将这样的ajax调用的结果发送到我的页面的最佳方法是什么,考虑到如果我把它放在一个原子中,那么当原子被解除引用时,Reagent会自动重新渲染一个组件,这意味着我得到了无限的ajax调用序列.

对于一些代码,

(def matches (atom nil))

(defn render-matches [ms]
  (reset! matches (into [:ul] (map (fn [m] ^{:key m}[:li m])
                                   (walk/keywordize-keys (t/read (t/reader :json) ms)))))

这个功能基本上创建一个 [:ul [:li "Stuff here"] [:li "And here"]]

我想在我的页面上显示,现在有以下代码.

(defn standings-page []
  (GET "/list-matches"
       {:handler render-matches})
  @matches)

我正在构建一个带有重新框架的应用程序,我想知道试剂形式是否意味着是否与重新框架一起使用,因为试剂形式带来了自己的处理状态,这与重新框架不同.

我正在使用秘书和试剂.这是我的代码:

(def view (atom nil))

(defn layout [view]
  [:div @view])

(reagent/render-component [layout view] (.getElementById js/document "message"))

(secretary/set-config! :prefix "")

(secretary/defroute home-path "/" [query-params]
  (timbre/info "Path : /, query params : " query-params)
  (let [warning (:warning query-params)
        success (:success query-params)
        login-failed (:login_failed query-params)]
    (when warning
      (timbre/info "Warning found : " warning)
      (reset! view [:h4 [:span.label.label-warning warning]]))
    (when success
      (timbre/info "Success found : " success)
      (reset! view [:h4 [:span.label.label-info success]]))
    (when login-failed
      (timbre/info "Login failed")
      (reset! view [:h4 [:span.label.label-warning "Login Failed."]]))))

(let …

考虑以下使用幽灵,试剂和重构框架的clojurescript代码,外部React.js网格组件用作视图组件.

在db.cls中:

(def default-db
  {:cats [{:id 0 :data {:text "ROOT" :test 17} :prev nil :par nil}
          {:id 1 :data {:text "Objects" :test 27} :prev nil :par 0}
          {:id 2 :data {:text "Version" :test 37} :prev nil :par 1}
          {:id 3 :data {:text "X1" :test 47} :prev nil :par 2}]})

在subs.cls中

(register-sub
  :cats
  (fn [db]
    (reaction
      (select [ALL :data] (t/tree-visitor (get @db :cats))))))

选择结果:

[{:text "ROOT", :test 17} 
 {:text "Objects", :test 27} 
 {:text "Version", :test 37} 
 {:text "X1", :test 47}]

在views.cls中 …

我尝试在Google Chart中调整此示例.到re-frame框架,reagent.我想基于订阅创建一个实时图表.我用一个简单的计数器= + - 1测试.

我收到了错误: Assert failed: Render must be a function, not nil (ifn? render-fun).

(defn draw-demo-chart 
   [d]
   (let [[columns vectors options chart] (r/children d)
         data (new js/google.visualization.DataTable)]
       (doall ;gotta keep the doall on maps. lazy sequence...
      (map (fn [[type name]]
            (.addColumn data type name)) columns))
      (.addRows data vectors)
      (.draw chart data options)
      (.load js/google "visualization" "1" (clj->js {:packages ["corechart" "orgchart" "calendar" "map" "geochart"]}))     
      (.setOnLoadCallback js/google draw-demo-chart)
      ))


(defn draw-demo-chart-container
    [] …