Passing options to JS function with Amber

Question

I'm trying to write the equivalent of:

$( "#draggable" ).draggable({ axis: "y" });

in Amber smalltalk.

My guess was: '#draggable' asJQuery draggable: {'axis' -> 'y'} but that's not it.

Answer 1

Not working on vanilla 0.9.1, but working on master at least last two months ago is:

'#draggable' asJQuery draggable: #{'axis' -> 'y'}

and afaict this is the recommended way.

P.S.: #{ 'key' -> val. 'key2' -> val } is the syntax for inline creation of HashedCollection, which is implemented (from the aforementioned two-month ago fix) so that only public (aka enumerable) properties are the HashedCollection keys. Before the fix also all the methods were enumerable, which prevented to use it naturally in place of JavaScript objects.

Answer 2

herby's excellent answer points out the recommended way to do it. Appearently, there is now Dictionary-literal support (see his comment below). Didn't know that :-)

Old / Alternate way of doing it

For historical reasons, or for users not using the latest master version, this is an alternative way to do it:

options :=  <{}>. 
options at: #axis put: 'y'.
'#draggable' asJQuery draggable: options.

The first line constructs an empty JavaScript object (it's really an JSObjectProxy).

The second line puts the string "y" in the slot "axis". It has the same effect as:

options.axis = "y"; // JavaScript

Lastly, it is invoked, and passed as a parameter.

Array-literals vs Dictionaries

What you were doing didn't work because in modern Smalltalk (Pharo/Squeak/Amber) the curly-brackets are used for array-literals, not as an object-literal as they are used in JavaScript.

If you evaluate (print-it) this in a Workspace:

{ #elelemt1. #element2. #element3 }.

You get:

a Array (#elelemt1 #element2 #element3)

As a result, if you have something that looks like a JavaScript object-literal in reality it is an Array of Association(s). To illustrate I give you this snippet, with the results of print-it on the right:

arrayLookingLikeObject := { #key1 -> #value1. #key2 -> #value2. #key3 -> #value3}.

arrayLookingLikeObject class. "==> Array"
arrayLookingLikeObject first class. "==> Association"
arrayLookingLikeObject "==> a Array (a Association a Association a Association)" 

I wrote about it here:

http://smalltalkreloaded.blogspot.co.at/2012/04/javascript-objects-back-and-forth.html