标签: re-frame

Devcards旨在为ClojureScript提供可视化的REPL体验.他们为Reagent和OM提供支持.如何让devCards与重新框架一起工作？

我按照这个例子：https : //github.com/Day8/re-frame/blob/master/docs/FAQs/PollADatabaseEvery60.md

这是我的间隔处理程序

(defonce interval-handler
  (fn [{:keys [action id frequency event]}]
    (let [live-intervals (atom {})]
      (condp = action
        :start (swap! live-intervals assoc id (js/setInterval #(re-frame/dispatch event) frequency))
        :end (do (js/clearInterval (get live-intervals id))
                 (swap! live-intervals dissoc id))))))

(re-frame/reg-fx
  :interval
  interval-handler)

我正在尝试从此处的另一个事件发送此间隔事件：

(re-frame/reg-event-db
  :start-playing
  (fn [db _]
    (re-frame/dispatch [:interval {:action :start
                       :id :some-awesome-id
                       :frequency 1000
                       :event [:tick]}])
    (assoc db :is-playing? true
           :fake (random-active-color db)
           :real (random-active-color db))))

但它说 re-frame: no :event handler registered for: :interval

这是不可能的吗？

我是重新构建的新手，不太确定如何用它构建用户身份验证/授权系统。

根据我收集的信息，我应该创建一个身份验证interceptor并将我的身份验证逻辑放在:before部分内，然后将拦截器注入到我想要保护的每个事件reg-event-db中。reg-event-fx

我走在正确的轨道上吗？

我是clojure和试剂的新手.我试图生成动态数量的复选框,其状态存储在app状态,这是一个像这样的dicts列表

[{:checked false, :text "Sample text 1"} {:checked false, :text "Sample text 2"} {:checked false, :text "Sample text 3"}]

下面的函数应该生成一个对应于app的db(db)指定索引的复选框.该功能可以完成工作,复选框可以单击.

(defn gen-checkbox [index db] 
     [re-com/checkbox
            :label (:text (@db index))
            :model (:checked (@db index))
            :on-change #(swap! db assoc-in [index :checked] (not(:checked (@db index))))
     ])

但是,当我单击任何复选框时,我在浏览器控制台中收到此错误.

Uncaught Error: Assert failed: Reaction is read only; on-set is not allowed

错误发生在swap!.有人可以指出我做错了吗？

db初始化部分如下:

(re-frame/reg-event-db ::initialize-db 
   (fn [_ _] 
      (atom [{:checked false :text "Sample text"}, {:checked false :text "Sample text"}, {:checked false …

有3个事件FNS在重制帧，我可以做两个同样的事情reg-event-db和reg-event-fx。

是什么之间的主要区别reg-event-db，reg-event-fx和reg-event-ctx？

什么时候应该使用reg-event-fxover reg-event-db，反之亦然。

Google 的<model-viewer>提供了我需要的所有关键功能，而无需通过类似react-three-fiber或直接在 Three.js 中编写自定义解决方案。

我正在努力解决如何将其正确集成到 Reagent（以及 React）结构中。

为了使其易于与 vanilla JS 一起使用，它被构建为一个 Web 组件，并且主要通过其 html 元素上的属性进行控制。通常这不会是什么大问题，但由于 3D 和加载大型模型重新渲染的开销，这是昂贵的，并且在许多情况下会破坏功能。

我试图天真地在组件内使用它，并试图消除重新渲染的可能性。使用 ref 直接改变它。

我还尝试将其设置为从 Reagent/React 控制的应用程序手动创建的 html 元素，并通过其 dom 元素在各种事件中引用它。

这两个选项都引入了很多技巧，并且在单页应用程序中并不理想。

我想知道是否有人有关于如何最好地将其包装在 React/Reagent shell 中的任何提示，同时仍然可以访问核心元素以使用其底层 JS api。

答案不必在ClojureScript中。

以下是其页面上的用法示例：

<model-viewer 
  alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
  src="shared-assets/models/NeilArmstrong.glb" 
  ar ar-modes="webxr scene-viewer quick-look" environment-image="shared-assets/environments/moon_1k.hdr" 
  poster="shared-assets/models/NeilArmstrong.webp" 
  seamless-poster 
  shadow-intensity="1" 
  camera-controls>
</model-viewer>

感谢您的任何提示。

关于Clojurians Slack 的其他讨论（链接需要访问 Slack）

关于Clojureverse的附加讨论

我正在尝试在试剂中呈现React Native ListView.

我有以下代码段:

(def data-source
 (React.ListView.DataSource. #js{:rowHasChanged (fn [a b] false)}))

(defn render-row []
  [ui/view])

(def rows
  (clj->js ["whoa", "hey"]))

(defn main-scene []
  (fn []
    [ui/list-view {:render-row render-row
                   :data-source (.cloneWithRows data-source rows)}]))

上面导致"失败的propType:dataSource未指定所需的prop ListView.检查渲染方法app.ios.ui.main_scene." 接下来是"无法读取未定义的属性'rowIdentities',因为数据源在ListView的render方法中未定义.

我的第一个猜测是在试剂/打嗝或其他任何东西的某个地方对某些"数据"属性进行了一些特殊处理,但我找不到为什么该属性没有正确传播的单一线索.

而且,是的,(.cloneWithRows data-source rows)实际上返回一个有效的ListViewDataSource对象实例.

然后,如果我通过:data-source,:dataSource我得到的是一个令人费解的"StaticRenderer.render():必须返回一个有效的ReactComponent.你可能已经返回了undefined,一个数组或一些其他无效对象."

我使用react-native 0.18.1和reagent 0.5.1用re-frame 0.6.0.我曾与选中此reagent 0.6.0-alpha和re-frame 0.7.0-alpha,得到了相同的错误.

我一直在挖这个几个小时,我想我需要一些帮助.尝试修复此问题的任何提示/想法,代码中的任何引用都要查看？非常感谢提前.

我有一个带有整数输入字段和两个按钮“+1”和“-1”的试剂组件。我想让用户能够：

• 直接在输入字段中输入整数值
• 单击“+1”将输入字段中的值增加 1
• 单击“-1”将输入字段中的值减 1

另外，在使用重新框架时，我希望能够

• 通过单击其中一个按钮输入或调整值后，将值保存到重新构建的应用程序数据库
• 如果输入字段的值在 re-frame 的应用程序数据库中发生变化，则更新它的值（例如，在我们从某个 API 服务器获取值之后）

我该怎么做？

我有原子foo:

(defonce foo (r/atom "foo"))

我有父组件:

(defn parent-component []
  (js/setTimeout #(reset! foo "bar") 5000)
  (child-component {:foo foo}))

我有孩子组成部分:

(defn child-component [props]
  (let [derefed (deref (:foo props))]
    (fn []
      [:div
       [:p derefed]
       [:p (deref (:foo props))]])))

重置后只更新第二段foo.

为什么这样工作？

我最近使用试剂和重新框架为我的clojurescript项目,我有一个问题:所以我有html自定义标签

<question id="1"></question>
<question id="2"></question>

我想用cljs函数将它们交换到我的试剂生成的html中

(defn mypanel []
 [:p "Hi!"])

(let [q (.getElementsByTagName js/document "question")]
  (for [i (range 2)]
    ^{:keys i}
    (reagent/render [mypanel]
                  (aget (.getElementsByTagName js/document "question") i))))

但它不起作用,我试图测试它而不使用for函数

(reagent/render [mypanel]
     (aget (.getElementsByTagName js/document "question") 0))

只用一个标签就可以了.

而且我不知道为什么for功能不起作用,或者试剂不能这样工作？有人有建议吗？

我非常喜欢这个.

我试图在我的re-frame/reagent/leiningen项目中使用cljsjs/vis，但将此库导入命名空间时出现错误。

cljsjs/vis in namespace required but not available

(defproject test1 "0.1.0-SNAPSHOT"
  :dependencies [[org.clojure/clojure "1.10.1"]
                 [org.clojure/clojurescript "1.10.764"
                  :exclusions [com.google.javascript/closure-compiler-unshaded
                               org.clojure/google-closure-library
                               org.clojure/google-closure-library-third-party]]
                 [thheller/shadow-cljs "2.9.3"]
                 [reagent "0.10.0"]
                 [re-frame "0.12.0"]
                 [cljs-ajax "0.7.5"]
                 [cljsjs/vis "4.21.0-1"]]

  :plugins [[lein-shadow "0.2.0"]

            [lein-shell "0.5.0"]]

  :min-lein-version "2.9.0"

  :source-paths ["src/clj" "src/cljs"]

  :clean-targets ^{:protect false} ["resources/public/js/compiled" "target"]


  :shell {:commands {"open" {:windows ["cmd" "/c" "start"]
                             :macosx  "open"
                             :linux   "xdg-open"}}}

  :shadow-cljs {:nrepl {:port 8777}

                :builds {:app {:target :browser
                               :output-dir "resources/public/js/compiled"
                               :asset-path "/js/compiled"
                               :modules …