Search code examples
javascriptjsviews

Make "if" dynamic in JSViews

I am trying to use JSViews to make a dynamic ui. I want to have radio buttons that hide/show different parts of the ui, and have the radio button be bound to my data.

Creating and binding the radio buttons works ok, but I am stuck on the next part. I tried using an {{if}} to show different parts of the ui based on the same value that is driving the radio buttons. It shows the correct ui based on the initial value, but when I change the radio button, the if doesn't evaluate with the new value.

Here is a jsfiddle that shows what I have so far.

The part that doesn't work the way I want is 

template += '{{if dynamic}}';
template += 'dynamic';
template += '{{else}}';
template += 'static';
template += '{{/if}}';
template += "</div>";

Is it even possible to do what I want with jsviews? I am trying to get rid of a bunch of code that was handling all the clicks and hiding and showing manually.

Solution

  • Ok, so it seems it was a simple fix. It just isn't documented anywhere that I could find.

    If I change

    {{if dynamic}}

    to

    {^{if dynamic}}

    then it magically becomes dynamic. See here.