Question

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

我有

form-doc返回带有输入的[:div]向量我喜欢绑定
form-test创建一个原子并调用bind-forms

secretary

/#/test路由

:field

似乎忽略了form-doc返回值中的bind-fields.键或未解析[:input ]

在下面的测试示例中，日期选择器永远不会显示，输入看起来与reagent-forms没有区别。

我使用localhost.localdomain:3000/#/test是否错误？缺少js依赖？

浏览器呈现了<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>

的HTML

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) ]

在ring / compojure处理程序中我有

project.clj

据我所知，所有必要的js和css都是由浏览器加载的

在:dependencies＆＃39;

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

中

            $main = mysql_query("select * from main_steps")or die(mysql_error());
            while($row1 = mysql_fetch_array($main)){
                echo "<div class=\"tab-pane\" id=\"tab5".$row1['id_main_steps']."\">".$row1['step_number']."-".$row1['step_measurement']."";
                $step = mysql_query("SELECT * FROM vpf_steps where step like '".$row1['step_number'].".%'")or die(mysql_error());
                while($row2 = mysql_fetch_array($step)){
                    echo "
                        <div class=\"form-group\">
                            <div class=\"row\">
                                <div class=\"col-md-2\">".$row2['step']."</div>
                                <div class=\"col-md-4\">".$row2['measurement']."</div>
                                <div class=\"col-md-2\"><input type=\"".$row2['input_type']."\" class=\"form-control\" name=\"".$row2['step']."\"></div>
                            </div>
                        </div>";
                }
                echo "</div>";
            }

Answer 1

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

(def form-doc ...代替defn

OR

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

Answer 2

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

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

你可能会觉得有用的东西是从一个现有的模板框架开始。这将使您能够专注于您想要学习/试验的内容，而不是陷入所有偶然的问题。我的建议是看看luminus。您可以使用

设置基本模板

lein new luminus +cljs

这将负责设置一个基本的环/组件后端，一个clojurescript，试剂，试剂形式和前端的秘书脚手架以及一些其他有用的位，例如伐木和图形，这可以使学习过程更容易一点。完成后，您可以运行

lein run

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

lein figwheel

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

http://localhost:3000

查看您的应用。关于luminus网站还有一些很好的文档。

试剂 - 表格绑定字段忽略＆＃39;：字段＆＃39;，缺少依赖项或不正确的用法？

2 个答案: