ClojureScript 将显示 none 更改为可见

Question

我想在单击按钮时修改 table 的可见性，利用 clojurescript/javascript 互操作。

我试过了

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

这是我调用它的 div 标签。

[: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! ""))

但它只是暂时显示 table，然后再次将显示设置为 none。

Answer 1

编辑：这个解决方案不假设任何库，基于阅读问题陈述没有明确提到任何 library/framework，只是 JS 互操作，直接修改 DOM la jQuery。如果您使用任何库或任何 React 包装器（例如试剂），请不要使用此答案。

也许创建一个辅助函数会更容易，例如 toggle hides/shows 通过其 ID 显示给定元素？

(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)))

我们通过其 id 找到元素，使用 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>

Answer 2

这是 re-frame 特有的解决方案。我建议使用 app-db 来存储状态，使用 handler 来更改状态，使用 sub 来检索当前值。 Re-frame 的自述文件是了解此设置的重要资源：https://github.com/Day8/re-frame

对 DOM 的直接更改将在 re-frame 认为合适时覆盖（这就是为什么您的原始代码被恢复为原始组件定义的原因）。

设置子程序/处理程序

您可以像这样创建 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))

更新代码以使用 subs / handlers

现在，更新您的搜索按钮以发送到 handler:

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

并根据 sub:

将您的搜索结果 div 更新为可见/隐藏

(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状态是持久的，这正是"mutations"可以安全控制的地方。

ClojureScript 将显示 none 更改为可见

ClojureScript change display none to visible

clojurescript

clojurescript-javascript-interop

设置子程序/处理程序

更新代码以使用 subs / handlers