Question

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

Answer 1

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

结帐ClojureScript cheatsheet，了解CLJS中JavaScript互操作性的简短摘要。

但是，现代Web应用程序不是使用这种直接DOM操作构建的。 @scott-lowe's answer建议使用 Reagent ，它是React的ClojureScript网桥，（目前）最受欢迎的UI框架之一。开始使用Web应用程序的好选择。

此外，我建议您查看基于Reagent构建的re-frame，并为您的应用提供状态管理。简单的入门方法是安装Leiningen build tool，然后简单地说lein new re-frame my-app-name。这为您提供了一个很好的模板来开始实验。使用lein figwheel运行应用，您可以在浏览器中立即看到对 cljs 代码的更改。开始入侵的好地方是 views.cljs ，其中包含主应用的hiccup-like模板。

Answer 2

看看Reagent项目，它提供了ClojureScript和React＆＃34;之间的简约界面。

Reagent project website包括以下示例：

(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)))

在上面的示例中，试剂组件simple-component呈现在body js/document节点的DOM中。 Reagent组件只是一个简单的功能，但您可以通过将这些简单的功能组合在一起来组成更复杂的HTML块。

还有很多其他方法可以生成HTML并与ClojureScript中的DOM进行交互，但我认为Reagent是ClojureScript社区中最受欢迎的库之一，这是公平的。它也很成熟并且记录良好。

如何使用Clojurescript与html DOM进行交互？

2 个答案: