Come creare elementi pulsante in ClojureScript?

Question

Sto cercando di creare nuovi elementi in ClojureScript e non sembra funzionare. Inizierò mostrando un esempio che ho trovato here.

(let [dom6238 (.createElement js/document "a")] 
    (.setAttribute dom6238 "href" "http://somelink") 
    (set! (.-innerText dom6238) "Text") 
    dom6238) 

che dicono convertiti:

var dom54535 = document.createElement("a"); 
    dom54535.setAttribute("href", "http://somelink.com"); 
    dom54535.innerText = "Hello there"; 
return dom54535 

Se non mi sbaglio, questo dovrebbe produrre un frammento di HTML che assomiglia a:

[:a.anchor.silly {:href "http://somelink.com"} "Text"] 

---

ho questo nel mio file .cljs:

(defn create-button [] 
    (let [a (.createElement js/document "a")] 
    (.setAttribute a "href" "http://somelink") 
    (set! (.-innerText a) "Text") 
    a)) 

(defn init [] 
    (let [a (.getElementById js/document "write-action") 
     b (.getElementById js/document "button-field")] 
    (set! (.-innerHTML a) 
      "field a") 
    (set! (.-innerHTML b) 
      (create-button)))) 

Il che produce (pulsante di campo è al di sopra di scrittura-azione nel HTML):

http://somelink/ 
field a 

quindi non c'è nessun tag di ancoraggio, solo testo.

---

Quello che sto cercando di fare è creare un pulsante, quindi non ho questo codice:

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    (set! (.-innerHTML new-button) 
      "I'm a button") 
    new-button)) 

che genera questo output:

[object HTMLInputElement] 
field a 

---

Quindi, io gioco circa un po 'e rimuovere il valore restituito:

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    (set! (.-innerHTML new-button) 
      "I'm a button"))) 

che crea:

I'm a button 
field a 

Ancora una volta, ho solo testo.

---

E devo essere completa:

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button"))) 

che restituisce solo il testo:

button 
field a 

---

E questo:

(defn create-button [] 
    (let [new-button (.createElement js/document "input")] 
    (set! (.-type new-button) 
      "button") 
    new-button)) 

Produce questo:

[object HTMLInputElement] 
field a 

---

Sono completamente perso qui e ho cercato di alta e bassa per ogni soluzione e non sembra essere qualcosa là fuori che risponde a questa domanda. Ho provato a racchiudere i nuovi attributi set in (do) e provare versioni senza (set!), Ma nulla sta creando il risultato desiderato.

Q: Come si crea un pulsante su cui è possibile fare clic utilizzando ClojureScript?

Bonus Q se qualcuno lo sa: perché l'esempio dal sito restituisce solo il risultato del primo elemento e non innerText mentre i miei esempi restituiscono solo i risultati del testo delle seconde (set!) Funzioni?

Answer 1

Si assegna un oggetto elemento DOM alla proprietà innerHTML di un altro elemento che ovviamente non funzionerà. È necessario utilizzare il metodo appendChild sull'elemento DOM per inserire un elemento figlio in esso.

(let [div (.createElement js/document "DIV")] 
    (.appendChild div (create-button))) 

Answer 2

Reagent fornisce un modo per creare elementi html e js da CLJS senza chiamare lo spazio dei nomi JS tutto il tempo. L'ho trovato molto più facile da capire. So che questo è un vecchio post ma compare in molte ricerche e questo potrebbe aiutare le persone a imparare. Esempio:

(defn your-button [] 
[:div 
    [:input.btn {:type "button" :value "Click Me!" 
     :on-click (your func here) }]]) 

CSS:

.btn { 

} 

Crea un pulsante all'interno di un div, maggiori informazioni qui: https://github.com/reagent-project/reagent