(ns ^:figwheel-always refs-test.core
(:require [om.core :as om :include-macros true]
[om.dom :as dom :include-macros true]
[sablono.core :as html :refer-macros [html]]))
(enable-console-print!)
(def app-state
(atom {:items [{:text "cat"}
{:text "dog"}
{:text "bird"}]
:selected-item {}}))
(defn selected-item []
(om/ref-cursor (:selected-item (om/root-cursor app-state))))
(defn
selected-item-title
[_ owner]
(reify
om/IRender
(render [_]
(html
[:div
(let [selected (om/observe owner (selected-item))]
(if (empty? selected)
[:h1 "Nothing selected"]
[:h1 (:text selected)]))]))))
(defn
selected-item-button
[item owner]
(reify
om/IRender
(render [_]
(html
[:li
[:button {:on-click
(fn []
(om/update! (om/root-cursor app-state) :selected-item item) ;; this doesn't update
;;(om/update! (om/root-cursor app-state) :selected-item (merge item {:foo 1})) ;; this does
)} (:text item)]]))))
(defn
root
[cursor owner]
(reify
om/IRender
(render [_]
(html
[:div
(om/build selected-item-title {})
[:ul
(om/build-all selected-item-button (:items cursor))]]))))
(om/root root app-state
{:target (.getElementById js/document "app")})
(https://www.refheap.com/108491)
(selected-item)
函数会创建一个跟踪:selected-item
中app-state
键的引用光标。当您单击selected-item-button
时,标题会发生变化,以反映已放入地图的新值。但是,这仅适用一次。按下其他按钮不会导致标题再次重新渲染,因此标题始终位于您按下的第一个按钮的值。
虽然只是添加一个带有附加关键字的merge
似乎可以使其正常工作......(与空地图合并也不起作用,尝试过!)
我对ref游标的理解是错误的吗?
答案 0 :(得分:0)
所以,问题很简单。
(om/update! (om/root-cursor app-state) :selected-item item)
应该是
(om/update! (om/root-cursor app-state) :selected-item @item)
注意该项目,因为它是一个游标,被解除引用。