javascript templates (embedded in haml)

[Jon Hancock]

Here's my problem: I'm using haml templates. Haml has a nice tag for
embedding javascript. So I can have a template that look like so:

%h1 my page
#someDiv
:javascript
window.addEvent('domready', function(){
// do some cool stuff
});

This allows me quite a bit of freedom. However, what do I do when the
javascript needs some parameters, for example some variable from my
controller? I can't do this as the haml javascript embedding is
literal.

I have been thinking about a merb helper so I could write the above
as:

%h1 my page
#someDiv
= javascriptHelper
window.addEvent('domready', function(){
// do some cool stuff WITH PARAM PARSING ON THIS CONTENT
});

But I don't see how this can be done. Any ideas on how to make this
easy? The current helpers I'm writing are horrific javascript string
concatenation nightmares.

thanks, Jon

[Jacques Crocker]

HAML provides the ability to use interpolation anywhere within the
javascript literal. For example:

:javascript
window.addEvent('domready', function(){

console.log("#{@some_string}");
});

set @some_string on the controller and you'll be able to get what you
need.

It's definitely not great for blocks and if/then statements, but it
should provide for at least a bit of dynamic content within your
javascript code. I'd recommend against all that though and doing
things through non-obstrusive methods.

[Ashley Moran]

On Nov 10, 2009, at 4:52 am, Jacques Crocker wrote:

> HAML provides the ability to use interpolation anywhere within the
> javascript literal. For example:
>
> :javascript
> window.addEvent('domready', function(){
> console.log("#{@some_string}");
> });
>
> set @some_string on the controller and you'll be able to get what you
> need.
>
> It's definitely not great for blocks and if/then statements, but it
> should provide for at least a bit of dynamic content within your
> javascript code. I'd recommend against all that though and doing
> things through non-obstrusive methods.

I now have a policy that every page contains only one JS function call (in our case, dojo.addOnLoad() with an anoymous setup), that uses interpolation to generate the call. Everything else is handled in plain JS files elsewhere. This helps avoid the nightmare of figuring out what the interpolation is doing. It also means all our source can be easily checked with JSLint.

Ashley

--
http://www.patchspace.co.uk/
http://www.linkedin.com/in/ashleymoran

[Tony Mann]

I put most of my JS in separate files, one for each controller, or for each controller/view when they get more involved.

To pass in info from the controller. I use two approaches. One is via onclick handler with interpolation. The handler consists of a single function call so its fairly clean.

When I want to pass data to several functions more unobtrusively, I set a JS global variable via a helper:

def js_set_var(name, val)

      "<script type=\"text/javascript\">var #{name} = #{val.to_json};</script>"

end

Both approaches work well for me.

..tony..

[Jon Hancock]

thanks all for the advice. The string substitution seems to be
working.
Jon