2016-04-19 6 views
1

DOMを更新するコードがあります。 new-recipe!はAPIを呼び出して新しいレシピ文字列を取得します。 update-recipe-stateは、この状態を画面で更新します。最後にupdate-transition-buttonsへの呼び出しがあります。コードはgoブロックから呼び出されませんが、REPLから機能します

(defn- add-listener-to-recipe-button! [] 
    "Listens to go button, creates a new recipe and displays it" 
    (create-click-event-listener! (dommy/sel1 :#button-start) 
           #(go (new-recipe!) 
            (<! (timeout 2000)) 
            (update-recipe-state!) 
            (<! (timeout 2000)) 
            (update-transition-buttons! "onboarding")))) 

;; define your app data so that it doesn't get over-written on reload 
(defonce world 
    (add-listener-to-recipe-button!)) 

update-transition-buttons(タイムアウトコードhereを使用して)、ステップの間にいくつかの遅延を持って次のようになります。

(defn- update-transition-buttons! [recipe-name] 
    "Updates the buttons with the transition names" 
    (go 
    ;; Split response in list of actions by splitting on the comma 
    (let [response (<! (http/get (get-recipe-transitions-url recipe-name))) 
      transition-names (clojure.string/split (:body response) ",")] 
     (go (update-buttons! transition-names) 
      (<! (timeout 2000)) 
      (js/console.log transition-names) 
      (set-button-event-handlers! transition-names))))) 

だから、文字列への応答を分割します。 updates-buttonsは、いくつかのボタンを追加することでページ上の状態を変更します(これは表示されます)。再びタイムアウトがあり、にイベントハンドラを追加するには、ボタンにイベントハンドラを追加します。これが間違っているところです。

次のように見える(もconsole.logが含まれている)イベントリスナーを作成するためのルーチン:

(defn- listen-to-transition-button! [name] 
    "Creates click event listener on button (button HTML ID should be name)" 
    (do (js/console.log (str "Listening to " name)) 
    (let [name-without-spaces (clojure.string/replace name " " "") 
      button (dommy/sel1 (keyword (str "#" name-without-spaces))) 
      action #(do (perform-action! name) 
         (update-recipe-state!))] 
     (create-click-event-listener! button action)))) 

(defn- set-button-event-handlers! [names] 
    "Creates click event listeners on the buttons (button ID should be name)" 
    (map listen-to-transition-button! names)) 

は再びあなたが渡された各要素に対して起こるはず console.logメッセージを参照してください。私はFirefoxのコンソールで取得出力は次のようになります。

[最初のサービスが呼び出さ]
[NEXTと呼ばれるサービス]
[STEPSの表示LIST]:[ "ステップ1"、 "ステップ2"、 "ステップ3"]

私は何を期待することは次のとおりです。

[最初のサービスが呼び出さ]
[次のサービスが呼び出さ]
[DISPLAYのLIステップのST]:[「ステップ1」、「ステップ2」、「ステップ3」]
そこでステップ3

に依存イベントハンドラ(鑑賞ステップ2
を聞くステップ1
を聴きます前の手順で生成されたHTML)は何らかの理由で追加されず、console.logメッセージは表示されません。私はREPLから同じコードを呼び出すとき

私はすなわち:

REPL =>(セット・ボタン・イベント・ハンドラ、出力を参照してくださいよ![ "ステップ1"、 "ステップ2"、 "ステップ3"])
(#object [オブジェクト[オブジェクトのオブジェクト] #object [オブジェクト[対象オブジェクト] #object [オブジェクト[対象オブジェクト])

そして、コンソール出力は次のようになります。

は、ステップ3

REPLから set-button-event-handlers!呼び出すことができますなぜ

ではなく、私に聞くステップ2
に聞くステップ1
に聞きますn update-transition-buttonsメソッドの後にupdate-buttons

答えて

6

問題はここにあるようになっています(起こりませんでした)、それは怠惰な配列を作成し、要素がどこかのコードでそれらの使用法まで実現されませんset-button-event-handlers!

(map listen-to-transition-button! names) 

を、しかし、それをreplで呼び出すと、すべての要素を出力に表示することが完全に実現しています。この行を次のように変更してみてください:

(doall (map listen-to-transition-button! names)) 
+0

ありがとう!!! –

関連する問題