ClojureScript：如何更改CodeMirror與試劑反應

Question

我試圖在我的網頁中嵌入一個CodeMirror來編輯幾個代碼片段，一次一個。

爲此I：

• 有一個試劑原子node-defs-atom包含地圖上的代碼片段。
• 有另一個原子node-history-atom其中包含正在查看的片段的鍵
• 將CodeMirror的值設置爲密鑰中的代碼映射的值。

這裏是行不通：

(defn editor [node-defs-atom node-history-atom] 
    (reagent/create-class 
    {:reagent-render (fn [] (do [:textarea 
        { :value (@node-defs-atom (last @node-history-atom)) 
         :auto-complete "off"}])) 
    :component-did-mount (editor-did-mount node-defs-atom node-history-atom) 
    })) 

(defn editor-did-mount [node-defs-atom node-history-atom] 
    (fn [this] 
    (let [codemirror (.fromTextArea js/CodeMirror 
            (reagent/dom-node this) 
            #js {:mode "clojure" 
              :lineNumbers true})] 

          ......))) 

更改node-history-atom與reset!沒有做任何事情在CodeMirror文本。我真的不確定發生了什麼問題。

如果有人可以告訴我應該在哪裏提及(@node-defs-atom (last @node-history-atom))，我會非常感激。

提前致謝！

Answer 1

你可以嘗試另一種方式來處理CodeMirror編輯

• 空節點

  (def cm (atom nil)) 
  
  (reset! cm (js/CodeMirror. 
        (.createElement js/document "div") 
        (clj->js {...}))) 
  

• 上創建一個CM實例，然後你的看法將是一個試劑類wrapper-id只是父母的一個ID

  (reagent/create-class 
      {:reagent-render   (fn [] @cm [:div {:id wrapper-id}]) 
      :component-did-update update-comp 
      :component-did-mount update-comp}) 
  

• 創建一個福nction其中追加CM到DOM節點

  (defn update-comp [this] 
      (when @cm 
      (when-let [node (or (js/document.getElementById wrapper-id) 
           (reagent/dom-node this))] 
       (.appendChild node (.getWrapperElement @cm))))