reagent-forms bind-fields игнорирует ': field', отсутствующие зависимости или неправильное использование?

Я не могу заставить reagent-forms привязаться к атому. У меня есть привязка данных, работающая в реагенте в другом месте того же файла. И я могу установить и отобразить рассматриваемый атом, как ожидалось.

у меня есть

  • form-doc, который возвращает [:div] вектор с входными данными, которые я хотел бы связать
  • form-test, который создает атом и вызывает bind-forms
  • secretary маршрут, определенный для /#/test

Похоже, что ключ :field в возвращаемом значении form-doc игнорируется или не анализируется 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>

in 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 загружаются браузером

in project.clj's :dependencies

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

clojurescript reagent reagent-forms
person Will    schedule 24.11.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Проблема в том, что вы определили form-doc как функцию, тогда как она должна быть просто def. Это простая ошибка. Взгляните на примеры на странице github с формами реагентов, и вы увидите, как это сделать.

Я не уверен, что ваше определение компонента datepicker также правильно. Я не использовал datepicker для форм реагентов, но он выглядит не совсем правильно, поэтому, возможно, посмотрите и его демонстрационные примеры.

что-то, что может оказаться полезным, - это начать с использования одной из существующих структур шаблонов. это позволит вам сосредоточиться на том, что вы хотите изучить / поэкспериментировать, а не зацикливаться на всех мелочах. Я бы порекомендовал посмотреть на luminus. Вы можете настроить базовый шаблон с помощью

lein new luminus +cljs

Это позаботится о настройке базового бэкенда Ring / compojure, clojurescript, reagent, reagent-forms и секретарских каркасов для внешнего интерфейса и некоторых других полезных битов, таких как ведение журнала и фиговое колесо, которые могут немного упростить процесс обучения . Как только вы это сделаете, вы можете запустить

lein run

чтобы запустить веб-сервер и ваше приложение, а затем

lein figwheel

чтобы скомпилировать ваш coljurescript и запустить ответ figwheel. Это действительно полезно, поскольку figwheel предоставляет прекрасную среду для разработки clojurescript. Как только вы это сделаете, просто перейдите к

http://localhost:3000

чтобы увидеть ваше приложение. На сайте luminus также есть хорошая документация.

person Tim X    schedule 26.11.2015

arrow_upward
1
arrow_downward

bind-fields, похоже, хочет объект, а не функцию.

(def form-doc ... вместо defn

OR

[rf/bind-fields (form-doc) doc ]
person Will    schedule 24.11.2015