2015-11-24 41 views
0

我無法獲得reagent-forms以綁定到原子。我有數據綁定工作在其他地方在同一個文件中的試劑。我可以按照預期設置和顯示有問題的原子。試劑形式綁定字段忽略':字段',缺少依賴或不正確的用法?

我有

  • form-doc一個返回[:div]矢量與我想束縛
  • form-test創建的原子,並呼籲/#/test

定義bind-forms

  • secretary路徑輸入這似乎是關鍵wi的:field薄的form-doc返回值被忽略或不被bind-fields.

    解析在下面的試驗例中,日期選擇器從不顯示和輸入看起來比沒有[:input ]不同會。

    我使用reagent-forms錯誤嗎?缺少js依賴項?在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)) 
    
    中環/的Compojure處理器

    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> 
    


    瀏覽器呈現的HTML我有

    (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"] 
    
  • 回答

    0

    的問題是,您已經定義表單文檔當它應該只是一個高清的功能。這是一個容易犯的錯誤。再次查看試劑表格github頁面上的例子,你會看到如何做到這一點。

    我不確定您的日期選擇器組件的定義是非常正確的。我沒有使用試劑表格datepicker,但它看起來不太正確,所以經常看一下這個demo的例子。

    您可能會發現有用的東西是從一個現有的模板框架開始。這將允許你專注於你想學習/試驗的東西,而不是陷入所有偶然的位。我的建議是看看luminus。您可以設置與

    lein new luminus +cljs 
    

    這是一個基本的模板會照顧設立一個基本的環/的Compojure後端,一個clojurescript,試劑,試劑形式和祕書腳手架前端和其他一些有用的位,這樣的作爲日誌和圖輪,這可以使學習過程更容易一些。一旦你這樣做,你可以運行

    lein run 
    

    啓動Web服務器和應用程序,然後

    lein figwheel 
    

    編譯您coljurescript並開始figwheel REPL。這是非常有用的,因爲figwheel爲開發clojurescript提供了一個美妙的環境。一旦你這樣做了,只要去

    http://localhost:3000 
    

    看到你的應用程序。在luminus網站上也有一些很好的文檔。

    1

    bind-fields似乎希望對象不是一個函數。

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

    OR

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