Пользовательский рендеринг Clojurescript Semantic UI React Search

Я пытаюсь реализовать поиск в Clojurescript с помощью реагента/рефрейма и семантического пользовательского интерфейса. Semantic-ui использует средство визуализации для предложений. Этот рендерер по умолчанию использует изображение, цену, заголовок, описание. Поскольку я хочу получить предложения по геокодированию, я хочу перечислить адреса. Это возвращаемые данные, которые я получаю. Я в основном хочу отображать имя, город и почтовый индекс в предложениях.

{:hits
 [{:osm_type "W",
   :name "Am Pfuhl",
   :osm_value "residential",
   :city "Berlin",
   :postcode "12209",
   :state "Berlin",
   :osm_key "highway",
   :extent [13.322584 52.4205878 13.3258975 52.419743],
   :point {:lng 13.3241429, :lat 52.4201622},
   :osm_id 103012039,
   :country "Deutschland"}
 :took 7}

Код, который я написал, не показывает мне никаких результатов. Я много пробовал, но я не знаю, как заглянуть в компонент, чтобы увидеть, изменяется ли его состояние и сохраняются ли результаты. Подписка дает мне результаты, когда я вызываю ее напрямую.

(def search (helper/component "Search"))
(def grid (helper/component "Grid"))
(def grid-row (helper/component "Grid" "Row"))

(defn on-search-change [event props]
  (rf/dispatch [:get-geocode (:value (js->clj props :keywordize-keys true))]))

(defn on-result-select [event props]
  (rf/dispatch [:geocode-selected]))

(defn get-geocode-results []
  @(rf/subscribe [:geocode-results]))

(defn result-renderer [& meh]
  (fn [meh]
    [:div (str meh)]))

(defn geocode-component []
  [:> grid
   [:> grid-row
    [:> search {:minCharacters 3
                :loading (when (:geocode @(rf/subscribe [:loading])) )
                :defaultValue "Berlin"
                :selectFirstResult true
                :onSearchChange on-search-change
                :onResultSelect on-result-select
                :resultRenderer result-renderer
                :results get-geocode-results}]]])

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

Спасибо и привет! Тимо

Изменить: решение на https://gist.github.com/TimoKramer/7e93758afb81dcad985fafccc613153a


semantic-ui clojurescript reagent re-frame
person Timo    schedule 16.03.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Из документов видно, что :resultRenderer ожидает компонент React, а вы даете ему функцию Clojure. Вы можете преобразовать свои компоненты в стиле икоты в компоненты React с помощью reagent.core/as-component.

Я не проверял это, но, возможно, это может быть так просто, как:

(defn result-renderer [& meh]
  (reagent.core/as-component [:div (str meh)]))

Я использовал аналогичную стратегию с всплывающими подсказками:

(defn info-icon
  ([message]
   (info-icon {} message))

  ([options message]
   (let [popup (component "Popup")
         icon  (component "Icon")]
     [:> popup
      {:trigger (reagent/as-component [:> icon (merge {:name "info"} options)])}
      " "
      message])))

Где component, вероятно, соответствует вашему helper/component, а reagent равно reagent.core

person Kenneth Kalmer    schedule 16.03.2018
comment
это точно решение. Когда закончу, я вставлю решение на github gist и добавлю его в качестве комментария. Благодарю вас! - person Timo; 20.03.2018