There are several ways to write JavaScript into your widgets. The most obvious is to put code into the JavaScript pane in Editor’s Desk. The other option is to put script into an {eval} block inside your HTML template via the HTML pane. It is important to understand how the code is loaded and executed differently for these two approaches.

What is {eval}?

{eval} is a TrimPath construct that lets you put arbitrary JavaScript inside the HTML template. Any valid JavaScript can be put inside an {eval} block, including function definitions and calls to other functions. It also doesn’t have restrictions about using curly-braces, as the ${token} syntax does.

What’s the difference?

There are only a few differences between code coming from the JavaScript section and from an {eval} block.

1)      JavaScript inside an {eval} block automatically has access to all the tokens, built-ins, and other widget goodness that we provide. JavaScript in the Script section does not.

2)      JavaScript inside the Script section is evaluated and executed before your widget is loaded. JavaScript inside an {eval} block is executed during the templating process, after the data and styles for your widget have loaded.

3)      Functions declared inside an {eval} block are only visible inside your widget’s template. External code, such as event handlers, cannot access those functions. Anything in the Script section is globally visible.

Which should I use?

95% of the time you want to use the Scripts section, simply because it’s easier to read and maintain. The primary reason to use an {eval} block instead is if you want to read or manipulate data that’s only visible from inside the HTML template.