ClojureScript изменить отображение нет видимым - PullRequest
Новая
       27

ClojureScript изменить отображение нет видимым

1 голос
/ 05 июля 2019

Я хочу изменить видимость таблицы при нажатии кнопки, используя взаимодействие clojurescript / javascript.

Я пробовал 

{:on-click #(-> js/document                                               
 (.getElementById "db-search-result-tables")                                               
 (.-style)
 (.-display "block"))}

Это тег div I 'Я звоню. 

[:div {:style {
       :display "none"}
       :id "db-search-result-tables"
        :class "db-search-results-table"}
[table-to-display]

Я также пытался 

(-> js/document                                               
 (.getElementById "db-search-result-tables")                                                
 (.-style)
 (.-display)
  (set! ""))

, но он только мгновенно отображает таблицу, а затем снова не отображает.

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Это решение, специфичное для перекадровки. Я бы предложил использовать app-db для хранения состояния, handler для изменения состояния и sub для получения текущего значения. README от Re-frame - отличный ресурс для изучения этой установки: https://github.com/Day8/re-frame

Прямые изменения в DOM будут переопределены при повторном кадре, когда он сочтет нужным (именно поэтому ваш исходный код был возвращен к исходному определению компонента).

Настройка сабов / обработчиков

Вы можете создать handler следующим образом: 

(re-frame.core/reg-event-fx
  :handlers/enable-search-results
  (fn [{:keys [db]} _]
    {:db (assoc db :show-search-results? true})

И sub для получения значения: 

(re-frame.core/reg-sub
  :subs/show-search-results?
  (fn [db]
    (:show-search-results? db))

Обновить код для использования подпрограмм / обработчиков

Теперь обновите кнопку поиска, чтобы отправить handler: 

[:button
  {:on-click #(re-frame.core/dispatch [:handlers/enable-search-results])}
  "Click to show search results"]

И обновите свой div результатов поиска, чтобы он был видимым / скрытым на основе sub: 

(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])]
  [:div {:style {:display (if show-search-results? "visible" "none"}
         :id "db-search-result-tables"
         :class "db-search-results-table"}
    [table-to-display]])

С другой стороны: 

(let [show-search-results? @(re-frame.core/subscribe [:subs/show-search-results?])]
  (when show-search-results?
    [:div {:id "db-search-result-tables"
           :class "db-search-results-table"}
      [table-to-display]]))

Поскольку состояние app-db является постоянным, именно здесь «мутации» можно безопасно контролировать.

0 голосов
/ 06 июля 2019

РЕДАКТИРОВАТЬ : Это решение не предполагает использования какой-либо библиотеки, основываясь на том, что в заявлении о проблеме явно не упоминается какая-либо библиотека / фреймворк, только JS-взаимодействие, изменяющее DOM напрямую в виде jQuery. Не используйте этот ответ, если вы используете какую-либо библиотеку или какую-либо оболочку React, например, реагент.

Может быть, было бы проще создать вспомогательную функцию, скажем, toggle, которая скрывает / показывает отображение данного элемента по его идентификатору? 

(ns myproject.core)

(defn ^:export toggle [elem-id]
  (let [elem        (js/document.getElementById elem-id)
        style       (.-style elem)
        display     (.-display style)
        new-display (if (= "none" display) "block" "none")]
    (set! (.-display style) new-display)))

Мы находим элемент по его идентификатору, используем var, чтобы получить текущий стиль, выводим отображение из стиля и вычисляем новое значение для атрибута display, затем мы set! возвращаем его обратно в отображение.

Я использовал тег метаданных ^:export, чтобы функцию можно было вызывать непосредственно из документа, например: 

    <div>
      <button onClick="myproject.core.toggle('details')">Toggle details</button>
    </div>

    <div id="details" style="display: none">
      Some details here. Some details here. Some details here. Some details here. 
    </div>
...