Fork me on GitHub
#hoplon
<
2016-11-16
>
micha01:11:03

awesome! great talk

micha01:11:11

we enjoyed

alandipert04:11:46

dangit i missed it

alandipert04:11:30

on the plus side, i have real internet now. tethered for 2 wks, what misery

flyboarder05:11:50

@alandipert: that could be interesting, do all the downloads!!

onetom05:11:11

@jumblerg do i understand well that there is still no support for initial form data? i saw some code which was reading default values from the :val keys of input elements, but then in practice i see the following:

(let [form-data (cell nil)]
      (row :ah :mid
        (form
          :change (partial reset! form-data)
          :submit (partial js/console.debug "form data: ")
          (line :key :amount
                :val "123"
                :f 14 :b 1 :bc grey :sh (em 30)))
        (row :ah :mid
          (cell= (pr-str form-data)))))

onetom05:11:15

so i have 1 line input with a default value of 123 and below it would like to see a specially rendered version of the form data which is kept in sync as i type into the form

onetom05:11:03

on page load i see

__123__
{}

onetom05:11:54

press enter: 123__ {:amount "123"} console: form data: {} `

onetom05:11:05

i would expect both the console.logged form data and the specially rendered version on page load to be {:amount "123"} instead of {}

onetom05:11:09

what am i missing?

onetom05:11:49

okay, here is an easier to try and observe version:

(let [changed-data (cell nil)
          submitted-data (cell nil)]
      (form
        :g 12
        :change (partial reset! changed-data)
        :submit (partial reset! submitted-data)
        (line :key :amount
              :val "123"
              :f 14 :b 1 :bc grey)
        (elem "changed data:" (cell= (pr-str changed-data)))
        (elem "submitted data:" (cell= (pr-str submitted-data)))))
Step 1. on page load:
123
changed data: {}   
submitted data: nil  
Step 2. after pressing enter:
123
changed data: {:amount "123"}
submitted data: {}  
Step 3. after pressing "4":
1234
changed data: {:amount "1234"}
submitted data: {}  
Step 4. then pressing enter again:
1234
changed data: {:amount "1234"}
submitted data: {:amount "1234"}  

onetom05:11:28

I would have expected • {:amount "123"} OR nil as changed data in step 1 • {:amount "123"} as submitted data in step 2

flyboarder05:11:48

@onetom: I think this is an issue with how the default value is handled, should it be contained in a cell?

onetom05:11:16

u mean :val (cell "123")?

flyboarder05:11:45

Well referencing one yes

flyboarder05:11:34

Like shouldn't that be the submitted-data

onetom05:11:47

looking at https://github.com/hoplon/ui/blob/master/src/hoplon/ui.cljs#L375

(when change (cell= (change (clean *data*)))) ;; init *data* to value of form fields on render
based on the comment i assumed that the value of the :val property is copied into *data* on render

flyboarder05:11:14

I'm not sure I don't use UI

onetom05:11:24

just wanted to say that 🙂

onetom05:11:11

in ui, the dom element value is maintained based on a keyword unless u override it with the :val attribute

flyboarder05:11:25

Like usually I use the change event on the field

flyboarder05:11:37

To update the cell

onetom06:11:02

this could work for the usual data editing flow:

(let [changed-data (cell nil)
          submitted-data (cell nil)
          initial-data (cell {:amount "123"
                              :extra "data"})]
      (form
        :g 12
        :change (partial reset! changed-data)
        :submit (partial reset! submitted-data)
        (line :key :amount
              :val (cell= (:amount initial-data))
              :autofocus true
              :f 14 :b 1 :bc grey)
        (elem "changed data:" (cell= (pr-str (merge initial-data changed-data))))
        (elem "submitted data:" (cell= (pr-str submitted-data)))))
however it requires consistency between the value of :key and the lookup keyword in :val

onetom06:11:24

and the initial-data should be combined with the changed and submitted data to get a full dataset back after editing

onetom06:11:31

which is actually not too bad...

onetom06:11:47

it's just slightly verbose

flyboarder06:11:17

Yeah it's not to difficult if you can't get the UI binding to work

onetom06:11:42

@jumblerg https://github.com/hoplon/ui/blob/master/src/hoplon/ui.cljs#L471

(.addEventListener (mid e) "click" (bound-fn [_] (or submit' *submit*) *data*))
shouldn't this be
(.addEventListener (mid e) "click" (bound-fn [_] ((or submit' *submit*) *data*)))
?

jumblerg08:11:29

@onetom: yes. the forms are still a work in progress, but that's definitely a mistake: if you could patch the click handler so the submit function is evaluated and applied to the form data it would be much appreciated.

onetom08:11:22

@jumblerg do you have any playground for them? i saw you removed the tst/hoplon/ui-test.cljs. i guess you want to move it into the tst/hoplon/demo.cljs, right?

onetom08:11:37

im just merging the latest hoplon/ui into our branch as we speak, then will migrate our app to it. the above form example clears up our issues with the initial data hopefully.

onetom08:11:50

it's a bit manual but it seems to work.

jumblerg08:11:44

i go back and forth between the two, depending upon what i'm doing. at some point the demo needs to be separated out into a separate project.

onetom08:11:36

btw, i've tried to add another page under tst/hoplon but when i loaded that page via i got redirected to any idea why could that happen?

jumblerg08:11:48

i recall encountering a bug in the hoplon boot task with the symtoms you're describing; it has been a problem for a while.

onetom10:11:36

@jumblerg how am i supposed to clear a form? pretty common example: the login form on an SPA should be cleared after login, so when i logout, i should be redirected to the login screen, where the password field should be empty. otherwise i can just press enter and im logged in again.

thedavidmeister13:11:30

is there a way to profile which cells are going slow?

alandipert13:11:17

@thedavidmeister chrome profiler will show slow code, which can be in cells

jjttjj14:11:36

@onetom to clear a form can't you just do (swap! hoplon.ui/*data* empty)

jjttjj14:11:00

I believe this used to not work, but it does in the current version with the hoplon binding stuff

jjttjj14:11:18

(that's inside the submit function I mean)

dm315:11:39

@thedavidmeister yeah, doesn't that help?