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

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

Checkout ClojureScript cheatsheet用于CLJS中JavaScript互操作性的简短摘要.

但是,现代Web应用程序不是使用这种直接DOM操作构建的.@ scott-lowe的回答建议使用Reagent,它是React的ClojureScript桥接器,是目前最受欢迎的UI框架之一.开始使用Web应用程序的好选择.

另外,我建议查看基于Reagent构建的重新框架,并为您的应用程序提供状态管理.简单的入门方法是安装Leiningen构建工具,简单地说lein new re-frame my-app-name.这为您提供了一个很好的模板来开始实验.运行应用程序,lein figwheel您可以在浏览器中立即看到对cljs代码的更改.开始入侵的好地方是views.cljs,其中包含针对您的主应用程序的类似打嗝的模板.

Answer 2

看看 Reagent 项目，它“在 ClojureScript 和 React 之间提供了一个简约的接口”。

该试剂项目网站包括下面的例子：

(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是在渲染到DOMbody的节点js/document。Reagent 组件只是一个简单的函数，但是您可以通过将这些简单的函数组合在一起来组合更复杂的 HTML 块。

还有许多其他方法可以从 ClojureScript 生成 HTML 并与 DOM 交互，但我认为可以说 Reagent 是目前 ClojureScript 社区中最受欢迎的库之一；它也很成熟并且有据可查。