Clojurescript DOM arabirimi

Question

DOM'ın Clojure veri yapısı gibi görünmesini sağlayan bir Clojurescript kitaplığı var mı? Ben DOM manipülasyon belirli tür do Enfocus gibi birkaç kütüphaneleri buldum ama ne istediğim böyle DOM tedavi edebilmek için ise:

Answer 1

Clojure veri yapıları üzerinde çok

(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 

ve tüm kalıcıdır Ancak, örneğinizde, yan etki yapmak istediğiniz gibi görünüyor (yani, bunu değiştirmek için DOM'ı vurun). Bu, prosedürel/zorlayıcı bir yaklaşımdır, dolayısıyla geriye adım atmaya ve problemi daha işlevsel bir tarzda yeniden biçimlendirmeye değer olabilir. Kişisel felsefem, "veri olarak görüntülemeleri" ele almak ve Clojure'ın kalıcı veri yapılarını, oluşturmam gereken son dakikaya kadar kullanarak modellemektir.

Hiccup hakkında bilgi alıyor musunuz? Eğer düz eski Clojure fonksiyonları oluşturularak inşa edebilir

[:div {:with "attribute"} "and" [:span "children"]] 

: Fikir düz vektörler ve haritaları kullanarak bir HTML veya SVG DOM temsil etmektir. Clojure'da bunu HTML'ye (orijinal Hiccup kütüphanesini kullanarak) yapabilirsiniz, ancak doğrudan (potansiyel olarak var olan) DOM yapılarına işleyen en az iki ClojureScript kitaplığı vardır. Crate, Hiccup'ın yakın bir bağlantı noktasıdır ve Singult, D3.js'den esinlenilmiş veri bağlama gibi bazı ek anlamlara sahiptir (Singult aslında CoffeeScript'te yazılmıştır, bu nedenle düz JavaScript'ten kullanılabilir ve Crate'den daha hızlıdır).

C2 kitaplığım, DOM'yi temel verilerle senkronize halde tutmak için veri bağlama semantiklerini Singult üzerine oluşturur.

(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 alınan): Bir TODO listesi için bu şablonu düşünün . "Tümünü denetle" kutusunun işaretli olup olmadığına bakılmaksızın, temeldeki verilerden (bir atomda saklanır) doğrudan elde edilir. Bu veriler her değiştiğinde, şablon yeniden çalışır ve dom otomatik olarak güncellenir.

Temel fikir, uygulama verilerinizden Hiccup veri yapılarına doğru ileri yönde eşlemeler oluşturmak ve daha sonra kütüphanenin DOM'ı senkronize etmesine izin vermesidir (ekleme/çıkarma, alt öğeleri, & c.). Kendinizi DOM'ın durumuyla ilgili olarak endişelendirmeniz gerekmiyorsa (bu zaten eklenmiş mi? Bazı sınıfları değiştirmem gerekiyor mu?), O zaman bir çok karmaşıklık düşüyor.