如何使 devCards 与 re-frame 一起使用？答案

【问题标题】：How do I make devCards work with re-frame?如何使 devCards 与 re-frame 一起使用？
【发布时间】：2017-09-20 19:28:36
【问题描述】：

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

【问题讨论】：

标签： clojure clojurescript reagent re-frame

【解决方案1】：

这是重新框架和开发卡经常出现的问题。主要问题是 re-frame 中的全局变量（主要问题是 db，但处理程序和订阅也可能是一个问题）与在同一页面上呈现多个 devcard 的想法不符。

一种可能的解决方案是在 iframe 中呈现每个 devcard。每个 devcard 将彼此隔离，即使它们包含在单个页面中并在视觉上呈现。这可能不是最有效的解决方案，但它确实有效：我在my devcards fork, under the iframe branch 中实现了它。它有a couple example devcards using re-frame

尽管它在 clojars 中以 [org.clojars.nberger/devcards "0.2.3-0-iframe"] 的形式发布，但它需要一些工作来提供一种更友好的方式来创建 iframe 开发卡，并且可能还需要一个特定于重新框架的开发卡宏。也可能有一些 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 或任何东西无动于衷）

【讨论】：

效果很好。但是，使用defcard-rg 时会出现字符串Test1。
字符串Test1出现在哪里？您的代码中是否有该字符串？随意分享显示问题的要点或回购，我可以看看

【解决方案2】：

更新：

这是我用figwheel main 做的：

将[devcards "0.2.6" ] 添加到您的依赖项中。
为您的卡片创建一个命名空间，例如src/cljs/cards/core.cljs。
添加新的额外主文件部分并在dev.cljs.edn 中打开开发卡

    ^{: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
     }

使用 defcard-rg 将卡片添加到 src/cljs/cards/core.cljs

(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

他们说你不能在the first page：

re-frame 仍然是一项正在进行的工作，并且在几个方式 - 例如，它不能像我们希望的那样使用 devcards

【讨论】：

我理解这句话“它不像我们想要的那样好用”，因为它在某种程度上有效。