6

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

4

2 回答 2

5

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

一种可能的解决方案是在 iframe 中渲染每个 devcard。每个 devcard 将彼此隔离，即使它们包含在单个页面中并在视觉上呈现。这可能不是最有效的解决方案，但它确实有效：我在devcards fork 中的iframebranch下实现了它。它有几个使用 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 或任何东西无动于衷）

于 2017-09-21T18:18:41.593 回答
1

更新：

这就是我用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!"})
  • figwheel-main使用上述配置文件 (dev)运行。
  • 转到开发卡

他们说你不能在第一页：

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

于 2017-09-21T01:29:22.607 回答