reagent-forms bind-fields 忽略'：field'，缺少依赖项或不正确的使用？

Question

我无法让 reagent-forms 绑定到原子。我在同一个文件的其他地方使用试剂进行数据绑定。我可以按预期设置和显示有问题的原子。

我有

form-doc return 是一个 [:div] 向量，输入我想绑定
form-test 创建一个原子并调用 bind-forms
secretary 为 /#/test

form-doc return 值中的 :field 键似乎被忽略或未被 bind-fields.

解析

在下面的测试示例中，日期选择器从不显示，输入看起来与 [:input ] 没有什么不同。

我使用的 reagent-forms 不正确吗？缺少 js 依赖项？

浏览器呈现 HTML，共 localhost.localdomain:3000/#/test

  <div data-reactid=".5.0.0">
    <input id="foobar" data-reactid=".5.0.0.0">
    <input id="test" data-reactid=".5.0.0.1">
    <input id="nofieldtest" data-reactid=".5.0.0.2">
    <div id="picker" data-reactid=".5.0.0.3"></div>
  </div>

在core.cljs

(ns ...
   ( :require
      ...
      [reagent.core :as reagent :refer [atom]]
      [reagent.session :as session]
      [secretary.core :as secretary :include-macros true]
      [reagent-forms.core :as rf ]
      [json-html.core :refer [edn->hiccup]]

))

(defn form-doc []
  [:div
   [:input {:field :text :id :foobar}]
   [:input {:field :text :id :test}]
   [:div   {:field :datepicker
            :id :picker
            :date-format "yyyy/mm/dd"
            :inline true}]
  ]
)
(defn form-test []
  (let [doc (atom {:test "test"} ) ]
    (fn []
      [:div.new-visit-form
        [rf/bind-fields form-doc doc ]
        [:div (edn->hiccup @doc) ]
 ]))
)
(secretary/defroute "/test" []
  (session/put! :current-page #'form-test))

我有 ring/compojure 个处理程序

 (include-js  "//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js")
 (include-js  "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
 (include-css "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css")
 (include-css "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css")
 [:style (-> "reagent-forms.css" clojure.java.io/resource slurp) ]

据我所知，浏览器加载了所有必需的 js 和 css

在 project.clj 的 :dependencies

 [reagent       "0.5.1"]
 [reagent-utils "0.1.5"]
 [reagent-forms "0.5.13"]

Answer 1

bind-fields 似乎想要一个对象而不是函数。

(def form-doc ... 而不是 defn

或

[rf/bind-fields (form-doc) doc ]

Answer 2

问题是您将 form-doc 定义为一个函数，而它应该只是一个 def。这是一个容易犯的错误。再次查看试剂形式 github 页面上的示例，您将了解如何执行此操作。

我也不确定您对日期选择器组件的定义是否正确。我没有使用过 reagent-forms datepicker，但它看起来不太正确，所以也许你也可以看看它的演示示例。

您可能会发现有用的是从使用现有模板框架之一开始。这将使您能够专注于您想要 learn/experiment 的内容，而不是被所有附带的位所困扰。我的建议是看看 luminus。您可以使用

设置基本模板

lein new luminus +cljs

这将负责设置基本的 ring/compojure 后端、clojurescript、试剂、试剂形式和前端的秘书脚手架以及一些其他有用的位，例如日志记录和 figwheel，可以使学习过程更容易一些。完成后，您可以运行

lein run

启动 Web 服务器和您的应用程序，然后

lein figwheel

编译你的 coljurescript 并启动一个 figwheel repl。这真的很有用，因为 figwheel 为开发 clojurescript 提供了一个美妙的环境。完成后，只需转到

http://localhost:3000

查看您的应用。 luminus 网站上也有一些很好的文档。

reagent-forms bind-fields 忽略'：field'，缺少依赖项或不正确的使用？

reagent-forms bind-fields ignores ':field', missing dependencies or incorrect usage?

clojurescript

reagent

reagent-forms