Clojurescript DOM接口
有没有让DOM看起来像Clojure数据结构的Clojurescript库？我发现了一些像Enfocus这样的库，它们执行某些类型的DOM操作，但我想要的是能够像这样处理DOM：
(get dom id) - returns element called id in dom
(get dom id create-fn) - return element if exists, otherwise creates it
(update-in dom [:body this that] update-fn) - set attribute on a DOM element
(assoc parent-element id child-element) - associate child element with parent
(conj parent child) - append child element to parent element诸若此类
回答 1
Stack Overflow用户
发布于 2012-07-02 22:48:33
Clojure数据结构都是持久化的，但在您的示例中，您似乎想要产生副作用(即，点击适当的DOM来更改它)。
这是一种非常过程化/命令式的方法，因此可能值得后退一步，以一种更函数式的方式重新阐述这个问题。我个人的哲学是将“视图视为数据”，并使用Clojure的持久数据结构对其进行建模，直到我需要呈现的最后一分钟。
你熟悉呃逆吗？其思想是使用普通矢量和映射来表示HTML或SVG DOM：
[:div {:with "attribute"} "and" [:span "children"]]您可以通过组合普通的老式Clojure函数来构造它。在Clojure中，您可以将其呈现为超文本标记语言(使用原始的Hiccup库)，但是至少有两个ClojureScript库可以直接呈现为(可能存在的) DOM结构。Crate是Hiccup的一个封闭端口，并且Singult具有一些额外的语义，比如受D3.js启发的数据绑定(Singult实际上是用CoffeeScript编写的，所以它可以从普通的JavaScript中使用，并且比Crate更快)。
我的C2库在Singult之上构建数据绑定语义，以使DOM与底层数据保持同步。请考虑使用以下模板作为待办事项列表：
(bind! "#main"
[:section#main {:style {:display (when (zero? (core/todo-count)) "none")}}
[:input#toggle-all {:type "checkbox"
:properties {:checked (every? :completed? @core/!todos)}}]
[:label {:for "toggle-all"} "Mark all as complete"]
[:ul#todo-list (unify (case @core/!filter
:active (remove :completed? @core/!todos)
:completed (filter :completed? @core/!todos)
;;default to showing all events
@core/!todos)
todo*)]])(摘自C2 TodoMVC implementation)。像"check all“框是否被选中这样的事情是直接从底层数据(存储在atom中)派生出来的。每当数据发生变化时，模板都会重新运行，dom也会自动更新。
基本思想是构建从应用程序数据到Hiccup数据结构的正向映射，然后让库负责同步DOM (添加/删除子对象、属性等)。如果你不需要关心DOM的状态(这个已经添加了吗？我需要切换某些类吗？)然后，许多附带的复杂性就会消失。
https://stackoverflow.com/questions/11288984
复制相似问题
腾讯云开发者
