example showing intent of bones-editable library

bones-editable-concept.clj

(defn detect-controls [{:keys [enter escape]}]
  (fn [keypress]
    (case (.-which keypress)
      13 (enter)
      ;; chrome won't fire 27, so use on-blur instead
      27 (escape)
      nil)))

(defn field [form-type identifier attr html-attrs]
  (let [path [:editable form-type identifier :inputs attr]
        value (subscribe path)
        input-type (or (:input-type html-attrs) :input)
        value-attr (or (:value-attr html-attrs) :value)
        opts (dissoc html-attrs :value-attr :input-type)]
    (fn []
      [input-type (merge {:on-change #(dispatch-sync (conj path (-> % .-target .-value)))
                          value-attr @value}
                         opts)])))

(defn checkbox [form-type identifier attr & {:as html-attrs}]
  (field form-type identifier attr (merge {:type "checkbox"
                                           :value-attr :checked}
                                          html-attrs)))

(defn input [form-type identifier attr & {:as html-attrs}]
  (field form-type identifier attr html-attrs))

(defn todo-item
  [todo]
  (let [id (get-in todo [:inputs :id])
        inputs (subscribe [:editable :todos id :inputs])
        ;; defaults (subscribe [:editable :todos id :defaults]) ;; like new
        done (subscribe [:editable :todos id :inputs :done])
        label (subscribe [:editable :todos id :inputs :todo])
        errors (subscribe [:editable :todos id :errors])
        state (subscribe [:editable :todos id :state])
        reset #(dispatch (e/editable-reset :todos id (:reset @state)))
        incomplete #(dispatch [:editable :todos id :inputs :done false])
        toggle #(dispatch [:editable :todos id :inputs :done (not %)])
        save #(dispatch [:request/command :todos id {:command :todos/update}])
        delete #(dispatch [:request/command :todos id {:command :todos/delete}])
        edit #(dispatch [:editable
                         [:editable :todos id :state :reset @inputs]
                         [:editable :todos id :state :editing true]])]
    (fn []
      [:li {:class (str (when @done "completed ")
                        (when (:editing @state) "editing"))}
       [:div.view
        [checkbox :todos id :done
         :class "toggle"
         :on-change #(do (toggle @done) (save))]
        [:label
         {:on-double-click edit}
         @label]
        [:button.destroy
         {:on-click delete}]]
       (when (:editing @state)
         [input :todos id :todo
          :id (str id "-id")
          :class "edit"
          :on-blur reset
          :on-key-down (detect-controls {:enter #(do (incomplete) (save))
                                         :escape reset})])])))