More concisedom_node and ref handling for jquery

[catmando]

currently you can grab a components ref mapped to jquery using the dom keyword:

INPUT(dom: set(:_input) ... )

it works just like ref, but the resulting value is wrapped by jQuery.

however if you say self.dom_node you get your own ref, and if you want jQuery you say DOM[dom_node]

Seems not very symmetrical.

I am suggesting we do something like this:

dom keyword -> jQuery wrapped reference
ref keyword -> reference

self.dom -> jQuery wrapped reference to self
self.ref -> straight dom reference to self.

and that is the problem ... its sort of backwards.

So alternative proposal:

dom keyword is synonym for ref
jq keyword is ref/dom wrapped by jquery

likewise self.dom is ref to yourself and
self.jq is your self wrapped by jquery

Any other ideas for a pair of names that could be used consistently in both places?

[barriehadfield]

Seems odd that self.dom gives you a ref - why not:

self.dom_ref gives you a ref to self
self.jq_dom_ref gives you a jQuery dom to self

ie just be explicit?

[catmando]

cause I hate typing

but perhaps these are obscure enough to warrant the extra typing?

[catmando]

how about dom_ref and jq_ref for the keys, and dom_node and jq_node for the methods?

[barriehadfield]

That sounds great @catmando I will remember that :-)

[catmando]

so I went around and around on this.

In the end I am leaving ref working the same as react's ref (i.e. it takes a callback which is sent the dom_node of the mounted component.

then there is a the set method which is part of the Observable module. This creates a lambda which sets an instance variable.

Together you can then say: ref: set(:foo) to set the @foo to the ref.

Meanwhile DOM is now changed to the shorter, and easier to understand JQ class to wrap jQuery.

So you could then say JQ[@foo] to get the jquery wrapped node.

You can also say JQ[dom_node] to get your own dom_node wrapped by jQuery.

Finally there is a set_jq method which works like set but wraps the node in jQuery for you like this:

ref: set_jq(:foo)

Summary:

• there is one special key in a components parameter list: ref which takes a callback argument.
• there is a helper method set which is part of the Observable module
• components continue to have the dom_node instance method
• if you are using jquery then set_jq is added

[catmando]

Summary:

In order to get a reference to a component add the special ref keyword to a components param list. The value of the param must be a proc which will receive the dom node. For example:

DIV(ref: ->(node) { puts "Hey my inner text is #{`#{node}.innerText` }) { "ho ho ho" }
# puts `ho ho ho` to the console

Because often you want to save the node in an instance variable the Observable mixin provides the set method which will set the provided instance variable to the value of the dom node.

#  @the_div will contain the dom node of the div once the `DIV` has been mounted.
DIV(ref: set(:the_div)) { "click me" }.on(:click) { alert("I said #{`#{@the_div}.innerText`") }
# alerts `click me`

If you are using jQuery you can access the jQuery API though the global jQ method:

 DIV(ref: set(:the_div)) { "click me" }.on(:click) { alert("I said #{jQ[@the_div].text}") }

See opal-jquery for details on the the Opal jQuery wrapper, just note that Element is replaced by the jQ as Element conflicts with the React Element wrapper.

Finally if you are using jQuery you can replace the set method by set_jq which will set the instance variable to the dom node wrapped by jQuery.

 DIV(ref: set_jq(:the_div)) { "click me" }.on(:click) { alert("I said #{@the_div.text") }