Fork me on GitHub
#hoplon
<
2017-12-28
>
James Vickers01:12:39

When you associate a function to a input listener (e.g. the :input property of a hoplon/input), what is the type that comes in there? I'm getting an error trying to use that value and when I print what comes into my anonymous function, I get [object Event].

flyboarder02:12:31

@jamesvickers19515 so are you providing a function to :input? Functions are for event’s. like :click

flyboarder02:12:20

I assume you are wanting something like :change #(reset! some-cell @%)

flyboarder02:12:00

remember you arn’t reading from the DOM, you are responding to DOM events

James Vickers03:12:38

Right, I'm trying to do a listener for an HTML input. I changed my handler function to be on :change instead of :input. My code looks something like this:

(def principal-input
  (h/input
    :id :principal :type "number" :min "1.00"
    :max "1000000000"
    :step "0.01" :value balance-cell :change #(reset! balance-cell @%)))
...where balance-cell is defined as a var bound to a javelin cell. But when I change the HTML input (e.g. click on up/down arrows), I get an error: Error: No protocol method IDeref.-deref defined for type object: [object Event]

James Vickers03:12:00

I believe I did have it working at some point as an anonymous function on :input; does that seem surprising?

flyboarder03:12:41

Im not familiar with the input event, I always use the changed event, are you including hoplon.jquery in your ns?

thedavidmeister11:12:10

@jamesvickers19515 #(.log js/console %) for debugging events - use the native console functionality or you just get useless JS object serialization logic

thedavidmeister11:12:12

IDeref is implemented for events in hoplon.jquery so will not work until you include that ns as mentioned ^^

thedavidmeister11:12:14

(extend-type js/jQuery.Event
  cljs.core/IDeref
  (-deref [this] (-> this .-target js/jQuery .val)))

thedavidmeister11:12:52

you can see it's just a shortcut for calling $(this).target.val() so is entirely optional if you want to work against the event directly

thedavidmeister11:12:39

@hiskennyness i sense a blog post coming on 😉 sounds like you have experience on both sides of the fence

James Vickers16:12:14

Thanks everyone; the problem was indeed that I wasn't including hoplon.jquery into my namespace. I recently removed that inclusion during refactoring, since there were no usages; I didn't realize it had implicit usages. As for :input vs :change, it looks like :change is fired when the value changes either by the arrow spinners or typing in a new value and pressing enter, while :input changes from arrow spinners and any keystroke into the input box.

flyboarder17:12:21

@jamesvickers19515 the hoplon.jquery ns is what we call an attribute provider, it handles how attributes should be processed. Otherwise hoplon just uses the native js functionality. You can read more about them on the wiki: https://github.com/hoplon/hoplon/wiki/HTML-Attributes-and-JS-Events https://github.com/hoplon/hoplon/wiki/Attribute-Providers

kennytilton17:12:57

Close! It will be a Clojure-NYC talk Jan 17, 2018: https://www.meetup.com/Clojure-NYC/ Not much React-bashing since I can just refer folks to thems that know more than I on existing web frameworks: https://www.infoq.com/articles/more-than-react-part-i and https://github.com/ThoughtWorksInc/Binding.scala and https://www.mendix.com/blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/… what the MobX crew misses is that they do not need ReactJS anymore. The binding.scala effort and Hoplon/Javelin have that right.

kennytilton17:12:50

Heh-heh, not sure I linked the above to @thedavidmeister very effectively. I blame #slack.

alandipert21:12:11

hiskennyness "fine-grained dataflow" i like it

James Vickers21:12:43

Are there more examples out there for using hoplon.svg? Made a polyline plot from the example (`plotSVG`), wanting to add axes labels, tick marks, plot title, etc.

flyboarder21:12:42

@jamesvickers19515 not really, there are special cases when it comes to SVG, like using :xlink/* and :svg/* attributes since jquery doesnt handle CamelCase attributes

thedavidmeister01:12:29

@flyboarder didn't we fix this by removing SVG attributes from jquery?

thedavidmeister01:12:32

or is that what you're saying?

flyboarder01:12:02

Yeah the jquery default do! Doesn’t work so you need to specify the :svg/* ns for the camel case to work

flyboarder21:12:47

it has been used previously tho

flyboarder21:12:25

let us know when you run into issues so we can document it 😉

flyboarder22:12:58

Just updated the wiki homepage to make it look like it’s actually a relevant place to go for information 😛

James Vickers22:12:56

@flyboarder thanks, it seems kind of hard or tedious to do line charts with that svg library, think I'm gonna try http://thi.ng/geom

James Vickers22:12:17

That came out wrong, my goal is to make 2D line charts and so I probably want something kind of tailored to that :)