Om ref游标在更新时不重新渲染组件

时间:2015-08-19 14:21:09

标签: clojurescript om ref-cursor

(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-itemapp-state键的引用光标。当您单击selected-item-button时,标题会发生变化,以反映已放入地图的新值。但是,这仅适用一次。按下其他按钮不会导致标题再次重新渲染,因此标题始终位于您按下的第一个按钮的值。

虽然只是添加一个带有附加关键字的merge似乎可以使其正常工作......(与空地图合并也不起作用,尝试过!)

我对ref游标的理解是错误的吗?

1 个答案:

答案 0 :(得分:0)

所以,问题很简单。

(om/update! (om/root-cursor app-state) :selected-item item)

应该是

(om/update! (om/root-cursor app-state) :selected-item @item)

注意该项目,因为它是一个游标,被解除引用。