0

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

我有

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

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

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

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

浏览器呈现的 HTMLlocalhost.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))

在环/复合处理程序中我有

 (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"]
4

2 回答 2

1

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

(def form-doc ...代替defn

或者

[rf/bind-fields (form-doc) doc ]
于 2015-11-24T18:36:55.307 回答
0

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

我也不确定您对 datepicker 组件的定义是否完全正确。我没有使用试剂形式的日期选择器，但它看起来不太正确，所以也许也可以看看它的演示示例。

您可能会发现有用的东西是从使用现有模板框架之一开始。这将使您专注于您想要学习/实验的内容，而不是陷入所有附带的问题。我的建议是看看 luminus。您可以设置一个基本模板

lein new luminus +cljs

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

lein run

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

lein figwheel

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

http://localhost:3000

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

于 2015-11-26T01:00:07.960 回答