Fork me on GitHub
#hoplon
<
2015-11-17
>
chromalchemy02:11:58

Noob question: I get that Hoplon integrates the jQuery event callbacks as hlisp attributes, and that you shouldn't need the selector part of the jQuery API. So how would you go about using other parts of the API, like Attributes/CSS, Manipulation, Effects, etc (http://oscarotero.com/jquery/)?

chromalchemy02:11:51

looking to start with a simple pattern like: (div :mouseover #(js/jQuery .fadeOut("slow"))

chromalchemy02:11:52

Also, if Hoplon requires cljsjs.jquery, is there a more succint way to refer to jQuery functions? Does (:require [cljsjs.jquery :as jq]) work? how would you use that? Thx!

micha02:11:55

you don't need to do (:require [cljsjs.jquery... actually

micha02:11:14

since hoplon already does that and you are requiring hoplon implicitly in your .hl file

micha02:11:02

if you want to see examples of how to use jquery i think a good place to look is at the hoplon source

micha02:11:18

that's where the part you'd be interested in starts

micha02:11:57

plenty of examples for how to use jquery things

chromalchemy02:11:01

Thanks. still trying to cobble together a "hello jquery" something like... (defmethod do! :myfade [elem] (.fadeOut (js/jQuery elem) "slow")) ... (div :mouseover #(myfade)) ???

micha02:11:34

the do! multimethod is a general type of thing to handle changes in state that need to be applied to an element

micha02:11:19

you can think of it like the "value" attribute of an <input> element for example

micha02:11:32

setting the attribute changes the internal state of the element

micha02:11:51

so do! is that concept, in abstract

micha02:11:24

do! methods take 3 pieces of information that they need

micha02:11:37

(defmethod do! :myfade
  [the-element the-attribute-name the-attribute-value]
  ...

micha02:11:08

(defmethod do! :myfade
  [the-element the-attribute-name the-attribute-value]
  (cond (= "in" the-attribute-value)
          (.fadeIn the-element "slow")
        (= "out" the-attribute-value)
          (.fadeOut the-element "slow")))

micha02:11:12

now all elements have a myfade attribute

micha02:11:28

which when you set it to myfade="in", causes the element to fade in

micha02:11:44

and if you set it to myfade="out" the element will fade out

micha02:11:18

then you can wire up the attribute value to a javelin cell, and it will fade in and out according to a formula

chromalchemy02:11:04

Thanks a bunch, will play with that. So my intuition to invoke jQuery methods directly to mutate state was wrong . Better to go through custom element attribute syntax and use cells for canonical state management...?

micha02:11:44

yeah, the do! and on! multimethods let you put the jQuery direct manipulation stuff behind a nice, uniform interface

sjm10:11:22

Hey there, are there any examples of integrating https://github.com/funcool/buddy into a hoplon castra setup?