Adding a class to a div when condition satifies with jsrender

Question

I can't figure out how to add a class to a div when a condition is satisfied. What are my options here?

This is what I'm trying to achieve:

<div class="wbackground rfonts {{if data.isPerson}}person{{else if data.isCat}}cat{{/if}}">

    ...

</div>

So far I've tried using the if tag inside the class attribute and it just doesn't work. Any ideas?

Answer 1

If you are using JsViews - i.e. you are doing data-linking (dynamic data-binding of UI to data), calling the link() method, then see here http://www.jsviews.com/#samples/data-link for a whole tutorial sequence of samples on data-linking elements, which actually starts out from a plain JsRender sample that includes

<span class="{{if role.indexOf('Lead')>=0}}special{{/if}}">.

So note that that syntax is totally allowed when just using JsRender, with the render() method.

However if you want to use data-linking, then the samples show you how to do that, including this specific sample for linking class: http://www.jsviews.com/#samples/data-link/class and this one for toggling class: http://www.jsviews.com/#samples/data-link/toggle.

If you are just using JsRender (calling the render() method, not the link() method) then see also http://www.jsviews.com/#iftag which explains all about how to use {{if}} ... {{else ...}} {{else}} ... {{/if}}.