@lsnape: The re-com component can be seen demoed here: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/input-text Coding can be seen here: https://github.com/Day8/re-com/blob/master/src/re_com/misc.cljs#L56-L58

But you son't have to use re-com. Take the idea and create your own input component for your own specific needs.

Is there an example of implementing the reagent ratom in JavaScript? If not, how hard would it be?

redux uses a store which is a js object but functions the same as that basically

@mattsfrey: true, I remember looking at that code before. And the redux subscription lib (forget the name atm...) handles focusing in on particular elements' updates like reaction

I'll take a look at those

redux has a 'connect' function that you wrap your components in and it will inject a piece of the state you select to monitor into the props everytime it updates

connect(state => state.myThing)(React.createComponent(...

basically

then inside myComponent this.props.myThing will exist and get updated whenever state.myThing changes

although not sure why you'd want to do any of this in js.. just looking at this code brings back horrible memories..

not necessarily vanilla js, but maybe one of the typed compile-to-js languages

https://github.com/reactjs/reselect is the subscription library I was thinking of

@danielcompton @mikethompson thanks for letting me know about re-com. It was already being used in the project for bits and pieces but not for textarea components. Substituting the offending textarea with a re-com component does indeed make the problem go away, yet I have to confess I’m none the wiser as to why this was happening in the first place: to my surprise it was the (.. e -target -value) values that were being scrambled; the re-frame event handlers and rendering were being called in the expected order.

Also, I’d like to know why by default the on-change handler is only invoked when the element is blurred? Is it just for efficiency reasons?

@lsnape: set :change-on-blur? to false

See Demo: http://re-demo.s3-website-ap-southeast-2.amazonaws.com/#/input-text

@mikethompson: sorry, what I meant is why :change-on-blur? is true by default

Sensible default for many situations

@jmmk I guess mobxjs also provides a pattern similar to ratoms/reactions

Hi, does anyone have an example somewhere of a table with reagent….

I would like to table to get updated when my atom gets update though.

TIA

@thomas:

(defn table-example [ratom]
  (let [foos (:foos @ratom)]
    [:table
     [:thead
      [:tr
       [:th "Header 1"]
       [:th "Header 2"]]
      [:tbody
       (for [{:keys [id bar baz]} foos]
	    ^{:key id}
	    [:tr
	     [:td bar]
	     [:td baz]])]]]))

hmm I must be doing something wrong in that case...

let me investigate some more. Thanks though

np!

ok, silly question… how/where do you call this func?

You'd call it like any other reagent component, using square brackets. For example (untested)

(defonce app-state
  (reagent/atom
    {:foos [{:id 1 :bar "xx1" :baz "yy1"}
          {:id 2 :bar "xx2" :baz "yy2"}
          {:id 3 :bar "xx3" :baz "yy3"}]}))

(defn table-example [ratom]
  (let [foos (:foos @ratom)]
    [:table
     [:thead
      [:tr
       [:th "Header 1"]
       [:th "Header 2"]]
      [:tbody
       (for [{:keys [id bar baz]} foos]
        ^{:key id}
        [:tr
         [:td bar]
         [:td baz]])]]]))

(defn page [ratom]
  [:div
   [:h1 "This is a Table!"]
   [table-example ratom]])

(reagent/render [page app-state]
                (.getElementById js/document "app"))

ok, I think I have that… more investigation needed.

thank you for your help though

no problem, happy to help

ok got it working now…. 🙂 turned out I didn’t have a vector of maps DOH

Glad you got it workin!