我目前正在努力学习om.next。
这是我的代码:
(ns hlearn.core
(:require [goog.dom :as gdom]
[om.next :as om :refer-macros [defui]]
[om.dom :as dom]
[sablono.core :as html :refer-macros [html]]))
(enable-console-print!)
(def app-data
(atom {:user ""
:main-menu {:selected :home}}))
;; -------------------------------------------------------------------------
;; Parsing
(defmulti read om/dispatch)
(defmethod read :selected
[{:keys [state]} _ _]
{:value (get-in @state [:main-menu :selected])})
;; -------------------------------------------------------------------------
;; Components
(defui MainMenu
static om/IQuery
(query [this]
[:selected])
Object
(render [this]
(let [{:keys [selected]} (om/props this)]
(println (= selected :home)))))
(def main-menu (om/factory MainMenu))
(defui RootView
Object
(render [this]
(println "Render RootView")
(main-menu)))
(def reconciler
(om/reconciler
{:state app-data
:parser (om/parser {:read read})}))
(om/add-root! reconciler
RootView (gdom/getElement "app"))我在这里的目标是,组件MainMenu必须在控制台上写入true (目前正在写入false)。
因为read函数应该返回{:value :home} (app状态上的值),因此(= selected :home)应该是真的。
实际上,MainMenu在控制台上写入false,因为selected具有nil值。
发布于 2016-01-07 16:04:06
事实证明,在RootView上呈现的(om/add-root!)组件必须为所有应用程序提供查询。
在这种情况下,RootView还必须提供一个查询,并将selected键传递给MainMenu组件。
(def app-data
(atom {:user ""
:menu {:selected :home}}))
(defui RootView
static om/IQuery
(query [this]
`[{:menu (om/get-query MainMenu)}])
Object
(render [this]
(let [{:keys [menu]} (om/props this)]
(println "Render RootView")
(main-menu menu))))另外,读取器函数在:menu键上调度,而不是:selected键。
(defmethod read :menu
[{:keys [state]} _ _]
{:value (get-in @state [:menu])})其余代码保持不变。
发布于 2016-01-21 04:39:17
在om.next中,正如您所发现的,所有查询都必须组合到根组件。根组件根据read函数在处理根查询时返回的内容分配它的read。
如果任何子组件都有查询,则应将该查询请求的支持作为子组件的工厂方法的第一个参数传递下来。这是你错过的第二件作品。
如果您在子组件中查询某个子组件中没有最终由其父组件传递的内容,则Om中目前没有任何警告或错误。因此,如果忘记传递道具,则最终会破坏子组件中键的nil值。
https://stackoverflow.com/questions/34646528
复制相似问题