Reagent / ClojureScript - многокомпонентные обновления аспектов - PullRequest
Новая
       9

Reagent / ClojureScript - многокомпонентные обновления аспектов

0 голосов
/ 16 ноября 2018

У меня есть компонент select, который показывает метку и связанные опции.Существует отдельный выбор языка, который должен выбирать язык дисплея.При изменении он обновляет как @language, который выбирает язык меток, так и @search-language-options, который предоставляет опции для выбора.Ярлык обновляется, как и ожидалось, но список параметров не обновляется - он остается в исходном состоянии.

;; search-languages -> vector
;; return the languages referenced in the data for options use

(defn search-languages []
  (let [options (list (tr {:dict ld} [@language :en] [:choice-any]))]
  (if (= @language :or) (concat options (vec (set (map (partial get-field "lang") parsed-json))))
    (concat options (vec (set (map (partial get-field "langTranslated") parsed-json)))))))

(def search-language-options (r/atom (search-languages)))

;; filter component -> component
;; create a select
(defn select-filter-component [label value options]
  [:div {:class "form-group"}
  [:label {:class "control-label" :for label} label]
  [:select {:id label :class "form-control" :value @value :on-change #(reset! value (-> % .-target .-value))}
    (for [opt options]
      ^{:key opt} [:option {:value opt} opt])]])

;; lang-select -> component
;; choose display language 
(defn lang-select []
[:div {:class "form-control" }
  [:select {:id :en :value @language :on-change (fn [e]
    (reset! language (.. e -target -value))
    (reset! search-language-options (search-languages)))
    }
  ^{:key :en} [:option {:value :en} "English"]
  ^{:key :fr} [:option {:value :fr} "Français"]
  ^{:key :es} [:option {:value :es} "Español"]
  ^{:key :or} [:option {:value :or} "Original language"]
  ]])

;; filter form
;; filter the results
(defn filter-form []

[:form {:class "form-inline"}
[search-filter-component (tr {:dict ld} [@language :en] [:search] ) search-text]

[select-filter-component (tr {:dict ld} [@language :en] [:language] ) search-language @search-language-options]
[select-filter-component (tr {:dict ld} [@language :en] [:gender] ) gender ["Any" "M" "F"]]
[select-filter-component (tr {:dict ld} [@language :en] [:continent/title] ) continent ["Any" "Europe"]]
[select-filter-component (tr {:dict ld} [@language :en] [:country] ) placeTranslated ["Any" "Austria" "Switzerland" "Germany"]]
[select-filter-component (tr {:dict ld} [@language :en] [:literaryForm] ) literaryForm ["Any" "Drama" "Poetry" "Prose: fiction" "Prose: non-fiction" ]]
[select-filter-component (tr {:dict ld} [@language :en] [:genre] ) genre ["Any" "Short story" "Novella" "Graphic Novel"]]
[reset-button]]

)

1 Ответ

0 голосов
/ 18 ноября 2018

Вы имеете в виду, что [:option...] элементы в select-filter-component не меняются?Если это именно то, что вы имеете в виду, по опубликованному коду трудно сказать, почему они не меняются, потому что эти параметры отображаются на основе реквизитов, переданных в select-filter-component, и вы не показали, как вы звоните select-filter-component.В частности, этот код полностью зависит от options пропущенной в:атом в for заметьте, что вам придется обернуть его в doall, иначе на атом не будут ссылаться во время рендеринга, и ваш компонент не будет обновляться при обновлении атома.)

ЕслиВы имеете в виду, что выбор различных параметров с помощью мыши не работает, то есть потому, что вы закомментировали обработчик on-change.

...