Om-next远程同步教程send-to-chan

Question

I am probably doing something wrong but I believe one of the om-next tutorials has some issues; specifically the autocomplete example. I was able to figure out one of the issues but there is another issue that is causing me some problems.

Once I put in more then two letters in the input box for autocompletion, the following code:

(defn send-to-chan [c]
  (fn [{:keys [search]} cb]
    (when search
      (let [{[search] :children} (om/query->ast search)
            query (get-in search [:params :query])]
        (put! c [query cb])))))

produces the following error:

Uncaught TypeError: Cannot read property 'call' of undefined
core.js?zx=3jufl8vymlgw [452]   om_tutorial.core.send_to_chan
next.js [3034]  om.next.Reconciler.om$next$protocols$IReconciler$send_BANG_$arity$1
protocols.js [303]  om$next$protocols$send_BANG_
next.js [1656]  anonymous

I am not sure why this is the case.

Any help would be greatly appreciated.

Answer 1

Not sure if this is the right way to do things, but this is what I did to solve this issue.

1. Checkout om from github. ( https://github.com/omcljs/om )
2. cd om
3. lein install

Now the latest om is available on your system. (you can not just put it in your project file, because it is not on https://clojars.org/repo/ yet).

4. Now this is where I think the confusion happened for me. Earlier in the tutorial, before the auto-correction example; there is a project file that is defined with [org.omcljs/om "1.0.0-alpha23"] . Then when the auto-correction example comes up, I used the same project configurations since there was no mention of how to configure the project file again. It turns out that you have to use [org.omcljs/om "1.0.0-alpha29"] .

Once that happens everything works although I get the following warning.

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `om_tutorial$core$AutoCompleter`. See https://fb.me/react-warning-keys for more information.

That will be a fight for another day.

BTW. Since I used the older version of om originally, just installing the new one did not solve the problem. lein clean did not solve the problem either. I had to manually delete my om-tutorial/resources/public/js folder. Then run lein run -m clojure.main script/figwheel.clj .

Answer 2

The error about each child array requiring a "key" prop has to do with React more than it does Om. React requires every subcomponent to have a unique id.

If you iterate over a factory method it won't generate a new id for each subcomponent automatically. You have to specify a key function:

(def app-state 
  (atom {:items [{:id 1
                  :title "Foo"}
                 {:id 2
                  :title "Foo"}]}

(defui Item
 static om/IQuery
 (query [this] [:id :title])
 Object
 (render [this]
   (dom/li nil (:title (om/props this))))

;; Specify key function as follows
(def item (om/factory Item {:keyfn :id})

(defui List
 static om/IQuery
 (query [this] [{:items (om/get-query Item)}])
 Object 
 (render [this]
   (dom/ul nil (map item (:items (om/props this)))))

The key function doesn't have to return a number, but it does have to return some kind of uniquely identifying piece of information for each item being iterated over (which in this case, the title is not).

Incidentally, you could also use map-indexed to generate a number to feed into the key function, or use a random number generator.

Answer 3

I think the problem is om.next/query->ast isn't defined in 1.0.0-alpha23 -- that was the source of the call on undefined error.

Here's a hacky work-around:

    (defn send-to-chan [c]
      (fn [{:keys [search] :as x} cb]
        (when search ;; e.g. [(:search/results {:query "xxx"})]
          (let [query (-> search first second :query)]
            (put! c [query cb])))))