index.cljs.hl

(page "index.html")

(defc db (sorted-map))

(defn append-item!  [txt]     (swap! db assoc (gensym) txt))
(defn edit-item!    [id txt]  (swap! db assoc id txt))
(defn delete-item!  [id]      (swap! db dissoc id))

(cell= (println (pr-str db)))

(defmethod do! :value2
  [elem k [v]]
  (let [$e (js/jQuery elem)]
    (when-not (.data $e "hoplon-value")
      (when (cell? v)
        (.data $e "hoplon-value" true)
        (.on $e "keyup" #(with-timeout 0 (.val $e @v)))
        (do-watch v #(.val $e %2))))))

(html
  (body
    (h3 "Item database")
    (textarea :cols "80" :rows "10" :disabled "true" (cell= (pr-str db)))

    (h3 "Add an item")
    (let [new-item (cell "")]
      (div
        (form
          :submit #(dosync
                     (append-item! @new-item)
                     (reset! new-item ""))
          (input
            :value new-item
            :type "text"
            :keyup #(reset! new-item @%))
          (button "Add"))))

    (h3 "See and edit items")
    (ol
      (loop-tpl
        :bindings [[id txt] db]
        (li
          (span
            (input
              :value2 [txt]
              :keyup #(if (empty? @%)
                        (delete-item! @id)
                        (edit-item! @id @%)))))))))