试剂-表单绑定-字段忽略‘：字段’，缺少依赖关系或不正确的用法？

Question

我无法使reagent-forms与原子结合。我在同一文件的其他地方有数据绑定。我可以像预期的那样设置和显示问题中的原子。

我有过

• form-doc，它返回一个[:div]向量，输入是我想要绑定的
• form-test，它创建原子并调用bind-forms
• 为secretary定义的/#/test路由

似乎:field返回值中的form-doc键被bind-fields.忽略或不解析。

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

我使用reagent-forms不正确吗？失去了js的依赖？

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

  <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

问题是，您已经将窗体-doc定义为一个函数，而它应该只是一个def。这是一个容易犯的错误。再次查看试剂表单github页面上的示例，您将看到如何做到这一点。

我也不确定您对datepicker组件的定义是否正确。我没有使用试剂-表单数据报警器，但它看起来不太正确，所以启示录看看演示的例子，以及。

您可能会发现一些有用的东西，首先使用现有的模板框架之一。这将使您能够专注于您想要学习/试验的内容，而不是被所有附带的细节所纠缠。我的建议是看看鲁米努斯。您可以使用

lein new luminus +cljs

这将负责建立一个基本的环/组合后端，一个文本，试剂，试剂表格和秘书脚手架的前端和一些其他有用的比特，如伐木和图形轮，这可以使学习过程更容易一些。一旦你这样做了，你就可以跑了

lein run

启动web服务器和应用程序，然后

lein figwheel

来编译你的结束语并启动一个小程序。这是非常有用的，因为方舟提供了一个极好的环境，为开发环境。一旦你这样做了，就去

http://localhost:3000

看你的应用程序。在鲁米努斯的网站上也有一些很好的文档。

Answer 2

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

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

或

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