HTML variables

(Introduced in version 2.2.0)

Sometimes you need to store HTML in variables for rendering later. Perhaps you have just taken in some user content via an ajax form, have removed any potential HTML tags that could be hidden away in the data, and stored it into a database. But now you want to send it back to the front-end as formatted HTML pre-rendered. Maybe you only now need some <br> tags in your user content, so that it can be displayed correctly somewhere on the page after the form has been saved.

How do you do this in Active CSS? Regular variables are not allowed to store HTML. What do you do? You can use HTML variables!

Just put a "$" before the specific variable containing HTML. If you are returning a pre-formatted HTML string in a JSON variable, you put the "$"at the beginning of the variable just as you would on the front-end. All JSON variables returned from an ajax call get converted to Active CSS variables automatically, so just make sure the JSON variable itself has a "$" at the beginning of it's name, as internally it will be recognized as an HTML variable and not a regular variable. You can also set HTML variables via the "var" command.

Eg.

var: $myHTML "<p>hello world</p>";

or for when using a nested array, you prefix only the variable in the array you want to allow HTML:

var: myArray[0][$myHTML] "<p>hello world</p>";

So not this - this won't work:

var: $myArray[0][myHTML] "<p>hello world</p>";    /* This is wrong */

You would do the exact same thing if you were iterating with a loop - the exact variable has the "$" before it:

...
@each item in list {
    render-after-end: "{item.somevar.$myHTML}";
}
...

That's the concept, and that's all there is to it. Just be careful that your data doesn't contain security holes for XSS scripting. If you are web developer, you should know all about that - so study up on it if you are unsure. It isn't difficult to defend against, and you really should know the potential dangers of JavaScript being contained inside user-submitted HTML. It isn't just a front-end issue, so don't think you can get away with it just by using JavaScript checks on the front-end, as any malicious person could easily edit any form in DevTools and insert some JavaScript manually before submitting the form, inserting a script tag or a dodgy onclick, etc. attribute or something. Even the most experienced devs can fall prey to this sometimes if they are crafting something manually. So study up if you don't know this stuff already.

Data-binding is not currently supported for HTML variables. But please yell if you need it. We're only adding new things into the core when specific requirements need solutions.