Реактивное добавление / удаление входов с помощью Reagent-форм - PullRequest
Новая
       65

Реактивное добавление / удаление входов с помощью Reagent-форм

0 голосов
/ 14 марта 2020

У меня есть некоторая структура данных в атоме, которую я хочу привязать к входам, используя формы реагентов. Хитрость в том, что я хочу связать не только содержимое входов с указанным атомом, но и сами входы; т.е. я хочу реактивно удалять и добавлять поля ввода, манипулируя атомом. Вот упрощенный пример того, что у меня есть: 

(ns my.app
  (:require
   [reagent.core :as r]
   [reagent-forms.core :as rf]))

(def appstate
  (r/atom {1 "a"
           2 "b"
           3 "c"}))

(defn inputfield
  ""
  [id]
  [:input {:field :text
           :id [id]}])

(defn inputfields
  ""
  []
  [:div
   (for [item @appstate]
     (inputfield (first item)))])

(defn total
  ""
  []
  [:div
   [rf/bind-fields (inputfields) appstate]
   [:div (str @appstate)]])

(r/render 
    [total]
    (js/document.getElementById "mainframe"))

Это работает, поскольку изменения в полях ввода отражаются атомом. Недостаток становится очевидным, когда я оцениваю следующее: 

(swap! appstate #(assoc % 4 "d"))

Пока это меняет атом, дополнительное поле не создается в DOM. Казалось бы, причина этого в том, что я следую документации по формам реагентов :

Шаблоны оцениваются с нетерпением, и вы всегда должны вызывать вспомогательные функции, как в примере выше вместо того, чтобы поместить их в вектор. Они будут заменены компонентами Reagent при вызове полей связывания для компиляции шаблона.

Насколько я понимаю, реагент означает, что атом в inputfields разыменовывается, когда bind-fields называется. Однако возвращенные компоненты больше не содержат ссылки на атом, следовательно, нет повторного рендеринга при замене атома.

Есть ли способ с формами реагентов получить привязку к формам и реактивное создание и удаление входных данных Я ищу?

Большое спасибо заранее

Оливер

...