 (defui TodoItem
   static om/IQuery
   (query [this]
-    [:id :title])
+    [:id :title :completed])
   Object
   (render [this]
-    (let [props (om/props this)
-          title (:title props)]
-      (dom/li nil title))))
+    (let [{:keys [id title completed]} (om/props this)
+          class (if completed "completed" "")]
+      (dom/li nil
+        (dom/input #js {:type "checkbox"
+                        :className "toggle"
+                        :checked (and completed "checked")
+                        :onChange #(om/transact! this `[(todo/toggle {:id ~id})])})
+        (dom/span #js {:className class} title)))))
 
 (def todo-item (om/factory TodoItem))
 

     (fn []
       (swap! state update :todos conj new-todo))}))


;; -----------------------------------------------------------------------------
;; Components

(def ENTER_KEY 13)

(def app-state
  (atom {:todos [{:id 1 :title "豚肉を買ってくる"       :completed true}
                 {:id 2 :title "たまねぎを買ってくる"   :completed true}
                 {:id 3 :title "にんじんを買ってくる"   :completed false}
                 {:id 4 :title "じゃがいもを買ってくる" :completed false}
                 {:id 5 :title "カレーを作る"           :completed false}]}))


;; -----------------------------------------------------------------------------
