익명 함수를 사용하지 않고 Om에서 onClick 처리기를 만들 수있는 방법이 있습니까?

Question

Om 컴포넌트의 클릭 핸들러 기능을 만들고 싶습니다. 난 항상 찾은 문서 및 스택 오버플로 예를 들면 나는 그것이 일반적으로 일반에 끝낼 방법 반작용,이 구성 요소 내에서 jsx/템플릿 영역 외부에 클릭 기능을 선언 청소기 생각이

(defn main-view [_ owner] 
    (reify 
    om/IRender 
    (render [_] 
    (let [xs (items)] 
     (dom/div nil 
     (om/build sub-view {:title "View A"}) 
     (om/build sub-view {:title "View B"}) 
     (dom/button 
      #js {:onClick 
       (fn [e] (om/transact! xs #(assoc % 1 {:text "zebra"})))} 
      "Switch To Zebra!")))))) 

같이 익명 함수를 선언 . 구성 요소 내 Om에서이를 수행하는 방법이 있습니까? 나는이 시도했지만 onclick을가 정의되어 있기 때문에 작동하지 않습니다

(defn my-component [] 
    (reify 
    om/IRender 
    (render [this] 
     ; Using Sablono syntax 
     (html [:h1 "Here is a heading" {:on-click 'onClick} ])) 
    onClick 
    (onClick [this] 
     ; this part never gets executed when you click 
     (.log js/console "click")))) 

나는 그것이 가능하다면 컴퍼넌트의 외부에 별도의 함수를 정의하지 않도록하고 싶습니다.

Answer 1

귀하의 질문은 합리적이며 데이터의 범위를 처리하는 것에있다.

대부분의 경우이 방법의 문제점은 외부 코드 블록의 로컬 범위 데이터가 필요합니다 (귀하의 경우 Om 구성 요소).

코드에서 설명하겠다. 방금 구성 요소 정의 내 주위에 이동하려는 경우

(defn local-data->handler [a b] 
    (fn [evt] (log (+ a b (.someAttr evt))))) 

(anything 
(let [a 1 b 2] 
    (on-event (local-data->handler a b)))) 

:

(anything 
(let [a 1 b 2] 
    (on-event (fn my-handler [evt] (log (+ a b (.someAttr evt))))))) 

당신은 더 이상 방법 인이 될 겁니다 :의 당신이 핸들러 함수를 이동하려는 가정 해 봅시다

을

(anything 
(let [a 1 
     b 2 
     my-handler (fn [evt] (log (+ a b (.someAttr evt))))] 
    (on-event my-handler))) 

참고 : 이벤트 처리기가 작동하도록하려면 익명이 아닌 형식 (defn 또는 let으로 작성)이 익명 형식, 특히 인수 목록과 동일해야합니다.

onClick은 Om 프로토콜 인 것처럼 사용하기 때문에 undefined가 정의됩니다. 정확한 사용법은 Om 생명주기 프로토콜을 참조하십시오.

https://github.com/swannodette/om/wiki/Documentation

Answer 2

요구 사항에 따라 함수 정의를 구성 요소 밖으로 옮겨야합니다.

그런 다음 이벤트 리스너에 함수의 이름을 전달 할 수 있어야한다 :

(defn foo [] (println "foo")) 

(defn my-component [text owner] 
    (reify 
    om/IRender 
    (render [_] 
     (dom/button 
      #js { :onClick foo } 
      "Click Here"))))