2015-10-22 18 views
0

我需要創建一個包含選擇字段的表單,其中的選項取決於當前可用的郵件帳戶。在頁面加載後,我會在API請求中檢索這些郵件帳戶。爲什麼試劑不能在狀態變化時重新呈現我的試劑形態

以下函數使用select元素創建窗體。

(defn create-options [mail-accounts] 
    (for [m mail-accounts] 
    [:option {:key (keyword (str (:id m))) 
       :value (:id m)} 
    (:name m)])) 

(defn render-mail-account-select [mail-accounts] 
    (let [form-state (r/atom {})] 
    (fn [mail-accounts] 
     (let [form [:form.mailing-form.form-horizontal 
        (into [:select.form-control {:field :list :id :mail-account}] 
         (create-options mail-accounts))]] 
     (pprint form) 
     [bind-fields form form-state])))) 

pprint給我下面的輸出:

;; Before the mail-accounts are loaded 
[:select.form-control {:field :list, :id :mail-account}] 

;; After the state update containing the mail accounts 
[:select.form-control 
{:field :list, :id :mail-account} 
[:option {:key :24, :value 24} "First mail account name"] 
[:option {:key :25, :value 25} "Second mail account name"]] 

我的問題是,我的網頁上選擇保持爲空,就好像選擇沒有得到重新呈現。

附錄

我想我忘記添加一些代碼: 我在KIOO組件包裹這種形式我取我state原子在哪裏。然後

(defsnippet choose-account-panel "html/static-panel.html" [:div.panel] 
    [] 
    {[:h4.panel-title] (content "3. Mail Account wählen") 
    [:div.panel-body] (content [render-mail-account-select (:mail-accounts @state)])}) 

該組件調用我render-mail-account-select功能,應該正確地重新呈現形式。

+0

(聲明:我不知道我在說什麼)你作出關閉了在咱們結合新試劑原子,但任何事情怎麼能爲了告訴表單更新更新原子?根據我的理解,您需要關閉外部定義的原子,以便可以傳播更改? – zimablue

+0

通過關閉'form-state'原子,我可以創建組件本地狀態。 – Kungi

回答

4

您需要取消引用Ratom for Reagent以瞭解當Ratom更改時需要再次調用哪些函數。該解引用需要在render-mail-account-select內部的匿名函數內發生,或者是其調用的函數之一。我在這裏看不到任何解除引用?

請參閱該文檔here對試劑的呈現更多的細節。

+0

作爲答案是有道理的,但如何重新框架文檔參考? –

+0

重新框架的文檔有一些非常好的使用試劑的建議。 –

0

正如已經指出的那樣,您的渲染函數必須在您的狀態原子中引用某些內容,以便知道它何時需要重新渲染。但是,如果您還希望顯示的表單具有選定的「默認」值,則還需要設置狀態原子。

綁定字段調用會將您的表單與狀態原子相關聯。如果狀態原子中沒有任何內容,則表單將是「空白」的,即沒有選中的元素。如果這是你想要的,那應該沒問題。但是,如果您想要選擇一個值,那麼您應該將該值放入原子中。例如,如果你想第一個項目已經被選中,然後放:24進入狀態原子即

(swap! form-state assoc :mail-account :24) 

請注意,我不知道你的選項定義是正確的。該文檔似乎表明您只需要:該屬性中的值(作爲關鍵字)的key屬性。我沒有看過源代碼來確認這一點,但沒有一個例子使用a:value屬性。

如果你在你的渲染功能的開始交換,則狀態原子將被引用和你的組件應該在每次重新渲染它被稱爲新的論據。當我說'渲染函數'時,在這種情況下,我的意思是匿名函數,而不是創建狀態原子的外部函數。

+0

什麼是「現場通話」?我甚至找不到任何東西,甚至像問題中的'gind'這個詞。我稍後會刪除此評論(我猜這意味着不要在這個評論下面留下評論,否則我將無法 - 不確定) –