index.cljs.hl

(page "index.html")

(defc people
  [{:first "micha"
    :last  "niskin"}
   {:first "sergey"
    :last  "raichman"}])

(def indexed
  (partial map-indexed list))

(defn path-lens
  [cell path-seq]
  (cell= (get-in cell path-seq)
         #(swap! cell assoc-in path-seq %)))

(defn add-person!
  [first last]
  (swap! people conj {:first first :last last}))

(defn do-something
  [people]
  (prn :do-something people))

(defelem cell-input
  [{:keys [state] :as attr} _]
  ((input (dissoc attr :state))
   :value state
   :change #(reset! state @%)))

(cell= (prn :people people))

(html
  (head)
  (body

    (h1 "Edit Person Info")

    (form
      :submit #(do-something @people)
      (div
        (loop-tpl
          :bindings [[i _] (cell= (indexed people))]
          (let [first-name (path-lens people [@i :first])
                last-name  (path-lens people [@i :last])]
            (fieldset
              (label "First Name:")
              (cell-input :type "text" :state first-name)
              (br)
              (label "Last Name:")
              (cell-input :type "text" :state last-name)))))
      (button :type "submit" "Update People"))

    (h1 "Add New Person")

    (let [first-name (cell)
          last-name  (cell)]
      (form
        :submit #(add-person! @first-name @last-name)
        (fieldset
          (label "First Name:")
          (cell-input :type "text" :state first-name)
          (br)
          (label "Last Name:")
          (cell-input :type "text" :state last-name))
        (button :type "submit" "Add Person")))))