如何使用Clojurescript与html DOM交互?

I am new to Clojurescript. I want to know how to create html elements, and how to change their properties using clojurescript. I cannot seem to find a lot of relevant information online.

我是新手。我想知道如何创建html元素，以及如何使用clojurescript更改它们的属性。我似乎在网上找不到很多相关的信息。

2 个解决方案

#1

Take a look at the Reagent project, which "provides a minimalistic interface between ClojureScript and React".

看一下试剂项目，它“提供了ClojureScript和React之间的极简界面”。

The Reagent project website includes this example:

试剂项目网站包括这个例子:

(ns example
  (:require [reagent.core :as r]))

(defn simple-component []
  [:div
   [:p "I am a component!"]
   [:p.someclass
    "I have " [:strong "bold"]
    [:span {:style {:color "red"}} " and red "] "text."]])

(defn render-simple []
  (r/render [simple-component]
    (.-body js/document)))

In the above example, the Reagent component simple-component is rendered into the DOM at the body node of js/document. The Reagent component is just a simple function, but you can compose more complex blocks of HTML by composing these simple functions together.

在上面的例子中，Reagent组件simple-component在js/document的body节点上被呈现为DOM。Reagent组件只是一个简单的函数，但是您可以通过将这些简单的函数组合在一起来构建更复杂的HTML块。

There are many other ways to generate HTML and interact with the DOM from ClojureScript, but I think it's fair to say that Reagent is one of the most popular libraries in the ClojureScript community right now; it's also mature and well documented.

还有很多其他的方法来生成HTML并与ClojureScript中的DOM交互，但是我认为可以这样说，Reagent是ClojureScript社区中最受欢迎的库之一;它也很成熟，也有很好的文档。

#2

ClojureScript provides good interoperability with JavaScript and the browser. You can call JavaScript globals and functions directly to query and manipulate DOM like so:

ClojureScript提供了与JavaScript和浏览器的良好互操作性。可以直接调用JavaScript全局变量和函数来查询和操作DOM，如下所示:

(-> js/document
    (.getElementById "app")
    (.-innerHTML)) ; returns contents of element with id 'app'

(-> js/document
    (.getElementById "app")
    (.-innerHTML)
    (set! "Hello Clojure!")) ; Sets new content for element

Checkout ClojureScript cheatsheet for short summary of JavaScript inter-operability in CLJS.

签出ClojureScript cheatsheet，简短地总结了CLJS中JavaScript的互操作性。

However, modern Web apps are not built with such direct DOM manipulation. @scott-lowe's answer suggests using Reagent, which is a ClojureScript bridge for React, (one of) the most popular JS framework for UIs at the moment. A good choice for getting started with Web apps.

然而，现代Web应用程序并不是用这种直接的DOM操作构建的。@scott-lowe的回答建议使用Reagent，这是目前UIs最流行的JS框架之一。开始使用Web应用程序是一个很好的选择。

In addition, I would recommend looking at re-frame, which builds on Reagent, and provides state management for your app. Easy way to get started is to install the Leiningen build tool, and simply say lein new re-frame my-app-name. This gives you a good template to start experimenting. Run the app with lein figwheel and you can see your changes to the cljs code instantly in the browser. A good place to start hacking is views.cljs, which contains hiccup-like template for your main app.

另外，我建议您看看reframe，它构建在Reagent的基础上，并为您的应用程序提供状态管理。简单的入门方法是安装Leiningen构建工具，并简单地说lein new reframe my-app-name。这为您提供了一个开始实验的好模板。使用lein figwheel运行应用程序，您可以在浏览器中立即看到对cljs代码的更改。开始黑客攻击的一个好地方是视图。cljs，包含你的主应用程序的hiccup样模板。

#1