diff --git a/examples/todomvc/src/todomvc.cljs b/examples/todomvc/src/todomvc.cljs index 78ca98c..ab5d747 100644 --- a/examples/todomvc/src/todomvc.cljs +++ b/examples/todomvc/src/todomvc.cljs @@ -13,29 +13,30 @@ (if-not (empty? v) (on-save v)) (stop)))] (fn [props] - (let [p {:type "text" :value @val :on-blur save - :on-change #(reset! val (-> % .-target .-value)) - :on-key-up #(case (.-which %) - 13 (save) - 27 (stop) - nil)}] - [:input (cloact/merge-props props p)])))) + [:input (merge props + {:type "text" :value @val :on-blur save + :on-change #(reset! val (-> % .-target .-value)) + :on-key-up #(case (.-which %) + 13 (save) + 27 (stop) + nil)})]))) (def todo-input (with-meta todo-input-render {:component-did-mount #(.focus (:dom-node %))})) -(defn todo-item [{:keys [todo editing is-editing - on-toggle on-save on-destroy]}] - (dbg "rendering item") - (let [{:keys [id done title]} todo] - [:li {:class (str (if done "completed ") (if is-editing "editing"))} +(defn todo-item [{:keys [todo on-toggle on-save on-destroy]} this] + (dbg "Rendering item") + (let [{:keys [id done title]} todo + {:keys [editing]} @this] + [:li {:class (str (if done "completed ") + (if editing "editing"))} [:div.view [:input.toggle {:type "checkbox" :checked done :on-change on-toggle}] - [:label {:on-double-click #(reset! editing id)} title] + [:label {:on-double-click #(swap! this assoc :editing true)} title] [:button.destroy {:on-click on-destroy}]] - (when is-editing + (when editing [todo-input {:class "edit" :title title :on-save on-save - :on-stop #(reset! editing nil)}])])) + :on-stop #(swap! this assoc :editing false)}])])) (defn todo-stats [{:keys [filter clear]}] (let [props-for (fn [name] @@ -67,14 +68,13 @@ (defn complete-all [todos v] (swap! todos mod-map map #(assoc-in % [1 :done] v))) (defn clear-done [todos] (swap! todos mod-map remove #(get-in % [1 :done]))) -(defn todo-main [props] +(defn todo-app [props] (let [todos (or (:todos props) (let [t (atom (sorted-map))] (dotimes [x 5] (add-todo t (str "Some todo " x))) t)) - filt (atom :all) - editing (atom nil)] + filt (atom :all)] (fn [] (let [items (vals @todos) done (->> items (filter :done) count) @@ -82,9 +82,8 @@ pred (case @filt :active (complement :done) :done :done - :all identity) - curedit @editing] - (dbg "rendering main") + :all identity)] + (dbg "Rendering main") [:section#todoapp [:header#header [:h1 "todos"] @@ -97,8 +96,7 @@ [:label {:for "toggle-all"} "Mark all as complete"] [:ul#todo-list (for [{id :id :as todo} (filter pred items)] - [todo-item {:key id :todo todo :editing editing - :is-editing (= curedit id) + [todo-item {:key id :todo todo :on-save (partial save todos id) :on-toggle (partial toggle todos id) :on-destroy (partial delete todos id)}])]] @@ -108,8 +106,5 @@ [:footer#info [:p "Double-click to edit a todo"]]])))) -(defn todo-app [] - [todo-main]) - (defn ^:export run [] (cloact/render-component [todo-app] (.-body js/document)))