search

ckirkendall / kioo

Enlive/Enfocus style templating for Facebook's React and Om in ClojureScript.
Eclipse Public License 1.0
404 stars 39 forks source link

Om: Add example of a component with local state #25

Open holyjak opened 10 years ago

holyjak commented 10 years ago

The current examples show how to create Om components that depend on the global app state but it is not clear how to create one that uses a local component state. Having an example would be therefore nice.

This is what I do, though I am not sure it is the best way - essentially wrapping a snippet in a stateful component:

(defsnippet search-html "index.html"
  [:#search]
  [{:keys [value]} owner]
  {[:#search-input] (kioo/do->
                          (kioo/set-attr :value value)
                          (kioo/set-attr :onChange #(handle-search % owner)))})

(defn search-input 
  "Stateful wrapper around the search Kioo template"
  [app owner]
    (reify
      om/IInitState
      (init-state [_] {:value nil})
      om/IRenderState
      (render-state [this state] (search-html state owner))))

;;;; Somewhere later, when attaching to a root:
;; (om/build search-input (om/graft {} app))

Thank you!

ckirkendall commented 10 years ago

@jakubholynet this would be a great example to add to the om example. @BorisKourt has started a kioo-docs project. I would love if we added this there. Once I get some free time that is where I will be concentrating my document efforts.

BorisKourt commented 10 years ago

I will add this asap. The example actually just helped me out now, thanks! : ) @ckirkendall you should see some real commits coming in to that docs repo soon.

holyjak commented 10 years ago

Lovely! Do you need any help from me, @BorisKourt ?

BorisKourt commented 10 years ago

I just have a request @jakubholynet it appears that om/graft has been depreciated as per https://github.com/swannodette/om/issues/152 (unless I am misunderstanding) could you provide a super bare but fully compilable example? I don't want to write something you didn't intend to demonstrate by accident, still fairly new to the 'om way' haha :)

Thanks!

holyjak commented 10 years ago

Thanks @BorisKourt, I haven't noticed that. Upgrading from 0.5.3 to 0.6.2 now :-) The right way to use the component without graft is

(om/build search-input {})

according to Nolen's example - and that is also what works for me with om 0.6.2 and cljs 0.0-2197