改成了老式的 on(:save) 写法, 工作了.

app/hyperloop/components/edit_item.rb

@@ -5,8 +5,8 @@ class EditItem < Hyperloop::Component
   # 而下面的 on_??? 则是定义了两个 `自定义事件',
   # type: Proc 表示这个名称的 param 是个 event 类型的 params
   # 当这个 params.on_save 被调用时, 该事件的 handler(Proc对象) 会被执行.
-  param :on_save
-  param :on_cancel
+  param :on_save, type: Proc
+  param :on_cancel, type: Proc
 
   # dom_node 方法返回一个组件被 mount 成功后, 这个组件对应的 node.
   # 当 EditItem 组件 mount 成功后, 设定焦点.
@@ -17,10 +17,10 @@ class EditItem < Hyperloop::Component
     edit_input.on(:key_down) do |evt|
       next unless evt.key_code == 13
       params.todo.update(title: evt.target.value)
-      params.on_save.call            # 激活 on_save 自定义事件.
+      params.on_save            # 激活 on_save 自定义事件.
       # 因为声明的时候, 使用了 type: Proc, 意味着这个调用会自动在 params.on_save 之上调用 call 方法.
     end
-    edit_input.on(:blur) { params.on_cancel.call } # add
+    edit_input.on(:blur) { params.on_cancel } # add
     # edit_input.on(:blur) do |evt|
     #   params.todo.update(title: evt.target.value)
     # end

app/hyperloop/components/header.rb

@@ -2,10 +2,6 @@ class Header < Hyperloop::Component
   state(:new_todo) { Todo.new }
 
   render(HEADER) do
-    EditItem(
-      todo:      state.new_todo,
-      on_save:   proc { puts 'hello'; mutate.new_tudo Todo.new },
-      on_cancel: proc {}
-    )
+    EditItem(todo: state.new_todo).on(:save) { mutate.new_todo Todo.new }
   end
 end

app/hyperloop/components/todo_item.rb

@@ -8,11 +8,9 @@ class TodoItem < Hyperloop::Component
       # 这里为自定义 on_save/on_cancel 事件绑定了 handler 方法.
       # 此时, EditItem 的 params.on_save 返回的是 handler 对象.(一个 Proc)
 
-      EditItem(
-        todo:      params.todo,
-        on_save:   proc { mutate.editing false },
-        on_cancel: proc { mutate.editing false }
-      )
+      EditItem(todo: params.todo).on(:save, :cancel) do
+        mutate.editing false
+      end
     else
       INPUT(type: :checkbox, checked: params.todo.completed).on(:click) do
         params.todo.update(completed: !params.todo.completed)