unable to render changed value in a vector about om

[swannodette]

Please create a minimal example that only uses Om so we can minimize the variables. Thanks.

[weihsiu]

per request

(ns om-sandbox.test-list
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)

(defn rand-value []
  (let [possible-values "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"]
    (rand-nth possible-values)))

(defn gen-list [n]
  (vec (repeatedly n rand-value)))

(defn test-list-item [item owner]
  (om/component
   (dom/li nil item)))

(defn test-list [items owner]
  (reify
    om/IWillMount
    (will-mount [_]
                (js/setInterval
                 #(om/transact! items [0] (constantly (rand-value)))
                 1000))
    om/IRender
    (render [_]
            (dom/div nil
             (dom/span nil (get items 0))
             (dom/ul nil
              (om/build-all test-list-item items))))))

(def items (gen-list 5))

(om/root items test-list (.getElementById js/document "content"))

[swannodette]

The problem is that you want to build a component from a non-cursor value. This is no longer allowed and I've exposed knobs to make it possible to wrap simple values in cursors, 5498b64

[swannodette]

A working version of your program based on master:

(deftype DefaultCursor [value state path]
  om/ICursor
  (-path [_] path)
  om/IValueCursor
  (-value [_] value))

(extend-type default
  om/IToCursor
  (-to-cursor
    ([n state] (DefaultCursor. n state []))
    ([n state path]
      (DefaultCursor. n state path))))

(defn rand-value []
  (let [possible-values "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"]
    (rand-nth possible-values)))

(defn gen-list [n]
  (vec (repeatedly n rand-value)))

(defn test-list-item [item owner opts]
  (reify
    om/IRender
    (render [_]
      (dom/li nil (om/value item)))))

(defn test-list [items owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (js/setInterval
        #(om/transact! items [0] (constantly (rand-value)))
        1000))
    om/IRender
    (render [_]
      (dom/div nil
        (dom/span nil (om/value (get items 0)))
        (dom/ul nil
          (om/build-all test-list-item items))))))

(def items (gen-list 5))

(om/root items test-list (.getElementById js/document "app"))

[swannodette]

On second thought I'm not really all that happy with my solution suggested above, as it then means you have to use om/value everywhere. I see two options at the moment, automatically coerce, or supply two new explicit fns something like build-value and build-values. Better ideas welcome.

[thheller]

Maybe make build/build-all wrap the value in something atom'ish, basically a wrapper around the root state + a path. build may then derive child paths and transact! takes on swap! like semantics (aka no need to provide paths)

so (dom/span nil (om/value (get items 0))) turns into (dom/span nil (get @items 0))

(om/swap! items update-in [0] (rand-value))

[swannodette]

I have a real solution coming that leverages the new specify feature.

[swannodette]

fixed in master, bc81082

You just need to extend string to ICloneable. Then we can make the JS value become a cursor via specify.

(extend-type string
  ICloneable
  (-clone [n] (js/String. n)))

(defn rand-value []
  (let [possible-values "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"]
    (rand-nth possible-values)))

(defn gen-list [n]
  (vec (repeatedly n rand-value)))

(defn test-list-item [item owner opts]
  (reify
    om/IRender
    (render [_]
      (dom/li nil item))))

(defn test-list [items owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (js/setInterval
        #(om/transact! items [0] (constantly (rand-value)))
        1000))
    om/IRender
    (render [_]
      (dom/div nil
        (dom/span nil (get items 0))
        (dom/ul nil
          (om/build-all test-list-item items))))))

(def items (gen-list 5))

(om/root items test-list (.getElementById js/document "app"))

[weihsiu]

nice! thanks for the prompt response and a cool solution.

On Fri, Jan 3, 2014 at 5:58 AM, David Nolen [email protected]:

Closed #36 #36.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/36
.

.......__o
.......<,
....( )/ ( )...

[aluuu]

There is a problem in last example. If you update not only first item in items, then calling of om/build-all will not update <li>'s.

[swannodette]

@aluuu can you give the full source that does not work for you. Thanks!

[aluuu]

There it is. Only transact! call changed.

(extend-type string
  ICloneable
  (-clone [n] (js/String. n)))

(defn rand-value []
  (let [possible-values "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"]
    (rand-nth possible-values)))

(defn gen-list [n]
  (vec (repeatedly n rand-value)))

(defn test-list-item [item owner opts]
  (reify
    om/IRender
    (render [_]
      (dom/li nil item))))

(defn test-list [items owner]
  (reify
    om/IWillMount
    (will-mount [_]
      (js/setInterval
        #(om/transact! items (constantly (gen-list 5)))
        1000))
    om/IRender
    (render [_]
      (dom/div nil
        (dom/span nil (get items 0))
        (dom/ul nil
          (om/build-all test-list-item items))))))

(def items (gen-list 5))

(om/root items test-list (.getElementById js/document "app"))

[swannodette]

Thanks looking into it.

[swannodette]

This works fine for me using master. What version of Om are you using?

[aluuu]

I'm in master too.
Just tried to execute git pull && lein install in local om repository and got the same.
In dependencies I have [om "0.1.4"]. I'll try to investigate what's wrong and I'll tell you.

[swannodette]

You need to run lein cljsbuild clean if you switch Om versions.

[aluuu]

Oh, wow. That works. Thanks!

[aluuu]

And also one change. I updated my dependencies to get it work:

[org.clojure/clojurescript "0.0-2138" :scope "provided"]
[org.clojure/core.async "0.1.267.0-0d7780-alpha" :scope "provided"]

[swannodette]

yes the README documents what your project.clj should look like.