我如何使用Clojurescript与html DOM进行交互？ [英] How can I use Clojurescript to interact with the html DOM?

问题描述

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

解决方案

ClojureScript为JavaScript和浏览器提供了良好的互操作性。您可以直接调用JavaScript全局变量和函数来查询和操作DOM，例如： b。（.getElementByIdapp）
（。-innerHTML））;返回id为'app'的元素的内容

（ - > js / document
（.getElementByIdapp）
（。-innerHTML）
（set ！Hello Clojure！））;设置元素的新内容

结帐 ClojureScript cheatsheet 对CLJS中的JavaScript inter-operability的简要总结。不过，现代Web应用程序并不是由这种直接的DOM操作构建的。 @ scott-lowe的回答建议使用 Reagent ，它是React的ClojureScript桥梁， ）目前最流行的用户界面JS框架。开始使用Web应用程序的不错选择。

另外，我建议您查看 re -frame ，它建立在Reagent之上，并为您的应用程序提供状态管理。简单的入门方法是安装 Leiningen构建工具，并简单地说 lein new re -frame my-app-name 。这给你一个很好的模板开始试验。使用 lein figwheel 运行应用程序，您可以立即在浏览器中看到对 cljs 代码的更改。开始黑客攻击的好地方是 views.cljs ，其中包含呃逆模板为您的主要应用程序。

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.

解决方案

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

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

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.

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.

这篇关于我如何使用Clojurescript与html DOM进行交互？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！