1

私は現在 om を試しており、外部データを読み込んでコンポーネントに表示しようとしています。

私の詳細コンポーネント:

(defn detail-component [app owner opts]
  (reify
    om/IInitState
    (init-state [_]
                (om/transact! app [:data] (fn [] "Test")))
    om/IWillMount
    (will-mount [_]
      (go (let [foo (<! (fetch-something 1))]
           (om/update! app #(assoc % :data foo))
           )))
    om/IRender
    (render [_]
      (dom/div nil
               (dom/h1 nil "Foo")
               (om/build another-component app)
               )
      ))
  )

( fetch-somethingAPI からデータを取得しています)。

(defn another-component [{:keys [data]}]
  (om/component
    (.log js/console data)
    (dom/h2 nil "Another component goes here")
    (dom/h2 nil (data :description))
    )
  )

要約すると、detail-component は、マウントする前にデータをフェッチし、それを にアタッチしてappビルドしanother-componentます。another-component次に、そのデータから説明を取り出して表示します。

ただし、実行するとUncaught TypeError: Cannot read property 'call' of null、説明にアクセスしようとしているところに到達します。これは、 がビルドされた時点another-componentで、データがまだ存在せず、失敗していることを示しています。

データが利用可能になったときにアプリをビルドするように om に指示するにはどうすればよいですか? または、いくつかのnil?チェックを組み込む必要がありますか?

4

1 に答える 1

3

状態を使用した作業例:

プロジェクト.clj

(defproject asajax "0.0.1-SNAPSHOT"
  :description "FIXME: write description"
  :url "http://example.com/FIXME"
  :license {:name "Eclipse Public License - v 1.0"
            :url "http://www.eclipse.org/legal/epl-v10.html"
            :distribution :repo}
  :min-lein-version "2.3.4"
  :source-paths ["src/clj" "src/cljs"]
  :dependencies [[org.clojure/clojure "1.6.0"]
                 [org.clojure/clojurescript "0.0-2371"]
                 [org.clojure/core.async "0.1.267.0-0d7780-alpha"]
                 [om "0.7.3"]
                 [com.facebook/react "0.11.2"]]
  :plugins [[lein-cljsbuild "1.0.4-SNAPSHOT"]]
  :hooks [leiningen.cljsbuild]
  :cljsbuild
  {:builds {:asajax
            {:source-paths ["src/cljs"]
             :compiler
             {:output-to "dev-resources/public/js/asajax.js"
              :optimizations :whitespace
              :pretty-print true}}}})

core.cljs

(ns asajax.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [cljs.core.async :as async])
  (:require-macros [cljs.core.async.macros :refer (go)]))

(enable-console-print!)

(def app-state (atom {}))

(defn another-component [{:keys [data]}]
  (reify
    om/IRenderState
    (render-state [_ state]
      (dom/div nil
               ;; (.log js/console data)
               (dom/h2 nil "Another component goes here")
               (dom/h2 nil (:description state))))))

(defn fetch-something [x]
  (let [c (async/chan)]
    (go
      ;; pretend a blocking call
      ;; wait for 2 sec
      (<! (async/timeout 2000))
      (>! c {:data "Roast peach & Parma ham salad"
             :description "This is a lovely light starter with fantastic sweet, salty and creamy flavours"}))
    c))

(defn detail-component [app owner opts]
  (reify
    om/IInitState
    (init-state [_]
      {:data "Test"})
    om/IWillMount
    (will-mount [_]
      (go (let [foo (<! (fetch-something 1))]
            ;; (prn "GOT" foo)
            (om/set-state! owner foo))))
    om/IRenderState
    (render-state [_ state]
      (dom/div nil
               (dom/h1 nil (:data state))
               (om/build another-component app
                         {:state (om/get-state owner)})))))

(om/root
 detail-component
 app-state
 {:target (. js/document (getElementById "app"))})

更新2

これは、sablono を使用し、set-state を使用していないものです!

project.clj に追加

         [sablono "0.2.22"]

完全な core.cljs

(ns asajax.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]
            [cljs.core.async :as async]
            [sablono.core :as html :refer-macros [html]])
  (:require-macros [cljs.core.async.macros :refer (go)]))

(enable-console-print!)

(def app-state (atom {:data "Initial"
                      :description "Loading..."}))

(defn another-component [{:keys [description]}]
  (om/component
   (html
    [:.description
     [:h2 "Another component"]
     [:h2 description]])))

(defn fetch-something [x]
  (let [c (async/chan)]
    (go
      ;; pretend a blocking call
      ;; wait for 2 sec
      (<! (async/timeout 2000))
      (>! c {:data "Roast peach & Parma ham salad"
             :description "This is a lovely light starter with fantastic sweet, salty and creamy flavours"}))
    c))

(defn detail-component [app owner opts]
  (reify
    om/IWillMount
    (will-mount [_]
      (go (let [foo (<! (fetch-something 1))]
            ;; (prn "GOT" foo)
            (om/update! app foo))))
    om/IRender
    (render [_]
      (html [:div
             [:h1 (:data app)]
             (om/build another-component app)
             ]))))

(om/root
 detail-component
 app-state
 {:target (. js/document (getElementById "app"))})
于 2014-11-17T14:59:22.050 に答える