Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/clojure/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Clojurescript DOM接口_Dom_Clojure_Clojurescript - Fatal编程技术网

Clojurescript DOM接口

Clojurescript DOM接口,dom,clojure,clojurescript,Dom,Clojure,Clojurescript,是否有Clojurescript库使DOM看起来像Clojure数据结构?我发现了一些像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-f

是否有Clojurescript库使DOM看起来像Clojure数据结构?我发现了一些像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

等等

Clojure数据结构都是持久的,但在您的示例中,似乎您希望产生副作用(即,点击适当的DOM来更改它)

这是一种相当程序化/强制性的方法,因此可能值得退一步,以更实用的方式重新阐述问题。 我的个人哲学是将“视图视为数据”,并使用Clojure的持久数据结构对其进行建模,直到我需要渲染的最后一分钟

你熟悉打嗝吗? 其思想是使用普通向量和映射表示HTML或SVG DOM:

[:div {:with "attribute"} "and" [:span "children"]]
您可以通过组合普通的Clojure函数来构造它。 在Clojure中,您可以将其呈现为HTML(使用原始Hiccup库),但至少有两个ClojureScript库可以直接呈现为(可能存在的)DOM结构。 是Hiccup的一个封闭端口,并具有一些附加语义,如受D3.js启发的数据绑定(Singult实际上是用CoffeeScript编写的,因此它可以从普通JavaScript中使用,并且比Crate更快)

我的库在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*)]])
(摘自)。 诸如“全选”框是否被选中之类的事情直接来自底层数据(存储在atom中)。 每当数据发生更改时,模板将重新运行,dom将自动更新

基本思想是向前构建从应用程序数据到Hiccup数据结构的映射,然后让库负责同步DOM(添加/删除子项、属性等)。
如果您不必关心DOM的状态(是否已经添加了它?是否需要切换某些类?),那么许多附带的复杂性就会消失。

ok刚找到Domina-最近的等级。实际上,我在考虑删除以前的DOM元素,并将它们与新生成的元素交换,以避免将DOM片段视为Clojure风格的持久化结构(但实现为“不可变的”DOM片段)。然而,现在我想起来,这可能是缓慢和浪费的。我将尝试你的库…它能做SVG吗?嗨,我在上尝试了条形图示例,得到了“未捕获错误:TODO:返回元素样式映射”。另外,由于大多数示例都是独立的代码片段,所以需要花一些时间来确定:require、:use和:use宏要做哪些事情。不过看起来很有趣。如何根据这些节点的标识管理数据到dom元素的映射?Unified如何知道哪些数据对应于dom中的哪些节点,以及是否添加新的数据?是的,它可以很好地处理SVG。Singult也会自动为您命名常见SVG元素(,&c)的名称空间(这样您就不必说,例如,
[:SVG:rect{:x 1}]
。默认情况下,对节点的映射使用索引,但您可以使用可选的
:key fn
参数提供unify,并给它一个函数f(数据,索引)其返回值将用于标识该节点。相关来源如下:好的,我使用(bind!)动态更新了一个简单的折线图(unify&该代码肯定比我以前添加或更新手动dom操作代码要简洁得多。在Firefox中通过Clojurescript更新SVG的速度非常慢(1次更新/秒是我能负担的全部)!Chrome可以每100毫秒处理一次更新-即接收JSON,转换成Clojure地图并将其映射到SVG图表。你有C2的组吗?在github页面或google组中找不到任何参考