I think the best way is to wrap this in a IShouldUpdate check. Where we check
the values against the previous values. We can do this pretty easily in this
case but can't use a template until I finish up wrap.
(defn handle-change [e data edit-key owner]
(om/transact! data edit-key (fn [_] (.. e -target -value))))
(defn custom-transform [field data owner]
(fn [node]
(-> node
#_(assoc-in [:attrs :value] (om/get-state owner field))
(assoc-in [:attrs :onChange] #(handle-change % data field owner)))))
(defn form-app [data owner]
(reify
om/IInitState
(init-state [_] {})
om/IShouldUpdate
(should-update [this next-props next-state]
(let [my-vals (select-keys next-props :name address)]
(when-not (= next-state my-vals)
(om/set-state! my-vals))))
om/IRenderState
(render-state [_ state]
(kioo/component
"public/fragments/f1.html" [:#header]
{[:input#name]
(custom-transform :name data owner)}))))
On Tuesday, May 20, 2014 1:32:53 AM UTC-4, Mark Fisher wrote:
> > It looks like this is a gap in kioo. I support the react events in listen
> > but not the om events. I need to create a wrap transform or add the om
> > protocol events to listen transform. I will try to put something together
> > tonight and post an example of how to use it.
>
> I look forward to trying it out.
>
> One other question/problem while I'm doing this, I'm using the code you
> originally posted (custom-transform) and it works except for one problem;
> when I type any value, the cursor jumps to the end of the input field after
> the first character, so if you back arrow through the text and type
> something, after the first character, you're editing the end of the field.
>
> So I'm doing:
>
> (def form-data (atom {:name "your name" :address "an address"}))
>
> ;; odd i have to use local state and global state and keep them in sync
> manually...
> (defn handle-change [e data edit-key owner]
> (om/transact! data edit-key (fn [_] (.. e -target -value)))
> (om/set-state! owner edit-key (.. e -target -value)))
>
> (defn custom-transform [field data owner]
> (fn [node]
> (-> node
> #_(assoc-in [:attrs :value] (om/get-state owner field))
> (assoc-in [:attrs :onChange] #(handle-change % data field owner)))))
>
> (defn form-app [data owner]
> (reify
> om/IInitState
> (init-state [_]
> {:name (:name data)
> :address (:address data)})
>
> om/IRenderState
> (render-state [_ state]
> (kioo/component
> "public/fragments/f1.html" [:#header]
> {[:input#name]
> (custom-transform :name data owner)}))))
>
> (om/root form-app form-data {:target (. js/document (getElementById "main"))})
>
> This appears to be because of the call to setting the :value in the
> custom-transform.
> Without it, the cursor editing behaves correctly, but then I don't know how
> to initialise the field so it shows the initial value.
>
> What's the best way to initialise a field to stop this behaviour?
> I'm going to try adding an initialised flag in the component state and only
> run the [:attrs :value] if it's unset, which should initialise it, just
> wondered if there was a better way?
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
