Make "if" dynamic in JSViews

Question

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.

score 0 · Accepted Answer · answered Sep 18 '13 at 20:34

0

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.

answered Sep 18 '13 at 20:34

Backslider

109
1
8

score 0 · Answer 2 · answered Sep 25 '13 at 00:46

That's correct.

Certainly it is documented (in quite a few places actually). Here are some of them:

http://www.jsviews.com/#jsviews - see: "And change {{if ...}} to {^{if ...}} and it too will be data-bound."
http://www.jsviews.com/#jsvplaying - see: "Any regular JsRender tag {{someTag ...}} - whether built-in or custom - can be data-linked by adding the ^: {^{someTag ...}}."
http://www.jsviews.com/#samples/editable/tags - see: "Data-linked tags: {^{for ...}}, {^{:...}}, etc."

Make "if" dynamic in JSViews

2 Answers2