2016-12-23 4 views
2

私はクエリを頭で囲んでいます。たとえば、複数のテーブルビューを持つRootコンポーネントを作成したいとします。OmクエリとUIコンポジションを理解する

official tutorial suggests

- 一つのアプローチではないクエリとテーブルビュー成分を有することであろう。 そして、あなたは小道具を介して使用する必要があるデータを渡すことができ、それはうまく動作します。

しかし、それは非常に単純なケースです。 UIツリーの下には、テーブルヘッダー、フッター、行、セルなどの複雑なUI構造があるため、TableViewのクエリを使用したい場合はおそらくTableViewとなります。 this tutorialはアプローチを提案していますクエリを使用して:まだ

そして、これはまだ多少簡略化した例です。

が、今私が必要

(defmethod read :numbers/odd [_ _ _] 
    {:value (filter odd? (range 50))}) 

(defmethod read :numbers/even [_ _ _] 
    {:value (filter even? (range 50))}) 

もちろん、実際のアプリでデータがバックエンドから来るとOmは状態原子にそれを貼り付けます(通常通り):それでは、私が持っている場合としましょうこれらのいずれかをレンダリングすることができるクエリTableView成分(又はこの場合に任意の配列)を有します。だから、私は何とか状態原子にどこかに座っているデータを使用するTableViewコンポーネントを伝える必要がありを参照してください。 TableViewのクエリは「動的」である必要があります。したがって、異なるデータをレンダリングする複数のTableViewsを使用する可能性があります。

のは、我々はルートのためにこのようなものがあるだろうとしましょう:

    :今、私はいくつかの質問を持って、私はOm.Nextインタフェースに

    を省略brewityため

    (defui Root 
        (query [_] [{:table/odd ,,,} {:table/even ,,,}]) 
        (render 
         [this] 
         (let [{:keys [table/odd table/even]}] 
         (html [:div 
           [:div.odds (ui-table-view odd)] 
           [:div.evens (ui-table-view even)]])))) 
    

  • Rootのクエリはどのように表示されますか?
  • TableViewでパラメータ化されたクエリを使用する必要がありますか(ここでは、状態アトムのデータのキーを指定しています)?または、他にどのようにTableView:numbers/oddを使用し、もう1つに:numbers/evenを使用するように指示できますか?
  • TableViewでパラメータ化されたクエリを使用する場合、どのようにRootからTableViewにパラメータを渡すのですか?
  • たぶん私はデータを渡すか、計算された小道具を経由してテーブルビューのデータにリンクする必要がありますか?
  • om/get-query(サブクエリがパラメータ化されている場合)はどうすれば使用できますか?
  • メソッドの読み込み方法は?原子の中で「物を動かす」ことがreadに必要ですか?良いアイデアのように聞こえません

誰かが私にいくつかの並べ替えの例を表示することができます。どうもありがとう!。

答えて

0

だから、これは私が思い付くものです:マップへのデータと連想がテーブルを表すことを読み取り相のグラブに、各テーブルを格納するために

それに関連するデータのキーと:

ので、

(defmethod parsing/read :app/tables 
     [{:keys [state parser] :as env} k _] 
     (let [ts    (get @state k) 
      merge-table-data' (fn [{:keys [data-key] :as t}] 
           (assoc t :table/data 
             (->> data-key 
              vector 
              (parser env) 
              vals 
              flatten)))] 
     {:value (map merge-table-data' ts)})) 

{:app/tables 
    [{:id  0 
     :title "Odd numbers" 
     :data-key :data/odds} 
     {:id  1 
     :title "Even numbers" 
     :data-key :data/evens}]} 

方法を読んだろうか。これは、次のようになります。我々は(奇数と偶数番号の)テーブルのカップルを持っている場合0

このアプローチには一つの大きな欠点があります。すべてのテーブルのすべてのデータを解析しようとしますので、改善する方法を見つける必要があります。データを取得するためのテーブルを選択的に指定できます。全体の溶液のための

スニペットhereある:

UPD:私は改良版を作った(要旨にファイルを追加しました)。この例では、データキーを指定できるので、指定された部分のみをロードします。

upd2:明らかにこのアプローチは突然変異を壊します。 Om.Nextの正規化機構を利用する必要があります。私はいつか要点を後で更新しようとします。

関連する問題