2015-10-28 22 views
3

我正在尝试进入ClojureScript和Om。有一个特殊的例子让我以圈子的方式运行。在组件数据中设置缺少密钥的初始状态

我有一个组件,第一次呈现没有密钥。

(defn model-view [data owner] 
    (reify 
    om/IWillMount 
    (will-mount [_] 
     (om/transact! data [:stats] (fn [] {})) 
     (go 
     (let [response ((<! (api/get-stats (data :id))) :body) 
       stats (:stats response)] 
      (om/update! data [:stats] stats)))) 
    om/IRender 
    (render [_] 
     (dom/div nil 
       (dom/h3 nil (data :title)) 
       ;; Here I want to use the :stats key in data that I 
       ;; queried for in IWillMount, but its not present 
       ;; the first time this model is rendered. It's only present 
       ;; AFTER IWillMount has ran. 
       (om/build model-stats-view (data :stats))))) 

第一次此组件被调用时,:stats关键是根本不存在于data。这就是为什么我会通过API调用来获取其统计信息。但是React仍然调用render函数,因此组件崩溃。

我怎么能在这个组件,让data称为:stats空映射,从而防止试图呈现在(om/build model-stats-view)呼叫nil设置一个初始状态?

+1

你可以使用'(get data:stats {})'? – cfrick

+0

@cfrick工作。谢谢。但是我会留下来看看是否有更多类似“类似React”的解决方案或者IInitState或其他东西。 – tolgap

回答

1

我更喜欢在初始化状态下完成所有的初始化,然后在渲染状态下访问它。我在我的安装架上放了一个循环回路。当你在循环中更新init-state(即:e-map)时,它强制调用渲染/重新渲染组件。我在我的所有组件中都使用它来实现组件间/组件内消息传递。只需将某些东西推入酒吧/分频道,我们就可以参加比赛。

;To update my state I use a function: 

(defn set-owner-state! [owner old-map-key old-map new-map] 
    (om/set-state! owner {old-map-key (merge old-map new-map)})) 

om/IInitState 
(init-state [_] 
    (println "queue->init-state") 
    {:e-map {:active-fsm nil}}) 

om/IDidMount 
(did-mount [_] 
    (go-loop [] 
     (let [[v _] (alts! [server-fsm-events dispatcher-events]) 
       current-state (om/get-state owner) 
       e-map (:e-map current-state)] 
     ; what goes in here is the logic to respond to a message 
     ; in my case I have a match, it could be a cond or a set of 
     ; if's. 
     (set-owner-state! owner :e-map e-map {:active-fsm :active :task-paths nil}) 
    ... 

om/IRenderState 
(render-state [_ {:keys [e-map]}] 
    (println "e-map:" e-map) 
    ... 
+0

你的文本解释很不错,它让我弄清楚我做错了什么。但是你的代码示例太模糊了。我会接受你的回答,但我希望你的代码示例能够真实地显示你如何修改:这里的电子地图。 – tolgap