如何在re-frame中使用devCards？

Question

Devcards旨在为ClojureScript提供可视化的REPL体验。它们支持Reagent和OM。我该如何让devCards与re-frame一起使用？

- dilvan

Answer 1

这是 re-frame 和 devcards 经常出现的问题。主要问题在于 re-frame 中的全局变量（主要问题在 db，但处理程序和订阅也可能是问题），它们与在同一页上渲染多个 devcards 的想法不兼容。

一个潜在的解决方案是在 iframe 中渲染每个 devcard。即使它们包含在同一页中并且在视觉上呈现，每个 devcard 也会被隔离。这可能不是最有效的解决方案，但它可以工作：我在 我的 devcards fork，在 iframe 分支下实现了它。它有一些使用 re-frame 的示例 devcards。

尽管它以 [org.clojars.nberger/devcards "0.2.3-0-iframe"] 的形式发布在 clojars 上，但它需要一些工作来提供更友好的方法来创建 iframe devcards，也许还需要针对 re-frame 的 devcard 宏。此外，可能还需要优化一些 UI 界面。但请随意使用它。当然，我们欢迎贡献和反馈。

我会在这里放一个示例来展示如何使用它：

(defcard-rg re-frame-component-initialize-db
  "This is the same re-frame component, but now using 
   data-atom to initialize the db, rendered in an iframe:"
  (fn [data-atom _]
    (setup-example-1)
    (re-frame/dispatch [:initialize-db @data-atom])
    [re-frame-component-example])
  {:guest-name "John"}
  {:iframe true})

（这个例子基于 re-frame 0.7.x，但是因为 iframe 机制与使用 re-frame 或其他任何东西无关，所以新版本应该可以正常工作。）

- nberger

---

它运行良好。但是，当使用“defcard-rg”时，“Test1”字符串会出现。 - dilvan

字符串 Test1 出现在哪里？你的代码中有这个字符串吗？欢迎分享一个 gist 或者 repo 来展示这个问题，我可以帮你看一下。 - nberger

Answer 2

更新：

我是如何使用figwheel main实现的：

• 将[devcards "0.2.6" ]添加到您的依赖项中。
• 为您的卡片创建一个命名空间，比如 src/cljs/cards/core.cljs。
• 在dev.cljs.edn中添加新的extra-main-files部分，并打开devcards功能。

    ^{:watch-dirs       ["src/cljs" "test"]
      :css-dirs         ["resources/public/css"]
      :auto-testing     true
      :extra-main-files {:testing  {:main menu-planner.test-runner}
                         :devcards {:main cards.core}} ;; <- this
      :open-url         false}
    {:main            menu-planner.core
     :infer-externs   true
     :devcards        true ;; <- and this
     }

• 在 src/cljs/cards/core.cljs 中添加带有 defcard-rg 的卡片

(ns cards.core
        (:require
                [devcards.core]
                [re-frame.core :as re-frame])
        (:require-macros
                [devcards.core :refer [defcard-rg]]))

(devcards.core/start-devcard-ui!)

(defcard-rg no-state
        [:div {:style {:border "10px solid blue" :padding "20px"}}
         [:h1 "Composing Reagent Hiccup on the fly"]
         [:p "adding arbitrary hiccup"]])

(defcard-rg with-state
        (fn [data-atom _]
                [:div "test"])
        {:initial-data "Ta-ta!"})

• 使用之前提到的配置文件（dev）运行figwheel-main。
• 转到 devcards。

---

他们说你不能在第一页做到：

re-frame仍然是一个正在进行中的工作，它在某些方面存在不足 - 例如它与devcards的兼容性不如我们所希望的那样好

- akond

---

我理解这句话“它的效果没有我们期望的那么好”意为其在某种程度上是有作用的。 - dilvan