BorisMoore / jsrender

A lightweight, powerful and highly extensible templating engine. In the browser or on Node.js, with or without jQuery.
http://www.jsviews.com
MIT License
2.67k stars 339 forks source link

Conditional check if equal to string #361

Closed thewebartisan7 closed 4 years ago

thewebartisan7 commented 4 years ago

How to do something like:

 {{if variable == 'string'}} show me {{/if}}

I can see in docs only:

{{if ~limits.maxVal > (product.price*100 - discount)/rate}}
  ...
{{else ~limits.minVal < product.price}}
  ... 
{{else}}
  ... 
{{/if}}

Thanks

BorisMoore commented 4 years ago

The syntax is {{if pathOrExpression}}. See Paths and Expressions for allowed expressions.

See lower down on that documentation page an example of what you are looking for:

Here are some examples of expressions:

{{if book.author === "Jim Boyd"}}...{{/if}}

So you can indeed write {{if variable == 'string'}}, or {{if variable=='string'}} or {{if variable=="string"}}

thewebartisan7 commented 4 years ago

Thanks for your reply.

I didn't explain that I am trying to add a condition inside html tag attribute, I read after creating this issue that for html tag attribute is required link=false but even that not works.

Works fine if I try outside html attribute.

I need to make a select tag selected if condition is true.

Template:

<select>
<option value="">Select...</option>
<option value="value-one" {{if selected === "value-one"}} selected {{/if}}>Value One</option>
</select>

Initialization of JSRender:

var tpl = $.templates("#myTemplate");
var html = tpl.render({selected: 'value-one'});
$container.append(html);

I try also using link: false option but don't work:

var html = tpl.render({selected: 'value-one'}, {link: false});

Since I am using JSRender and not JSViews, what is this link:false for? Is for data binding? As I understand data links works only with JSViews? I mean data-link attribute that I see in doc.

Thanks

BorisMoore commented 4 years ago

I don't see the problem. This works correctly, for me:

<div id="result"></div>

<script id="myTemplate" type="text/x-jsrender">
<select>
<option value="">Select...</option>
<option value="value-one" {{if selected === "value-one"}}selected{{/if}}>Value One</option>
<option value="value-two" {{if selected === "value-two"}}selected{{/if}}>Value Two</option>
<option value="value-three" {{if selected === "value-three"}}selected{{/if}}>Value Third</option>
</select>
</script>

<script>
var tpl = $.templates("#myTemplate");
var html = tpl.render({selected: 'value-two'});
$("#result").append(html);
</script>

Also, can you tell me where in the documentation you read about setting link=false or link: false? I don't see that anywhere. Am I missing something?

Are you using the current release of JsRender or JsViews?

thewebartisan7 commented 4 years ago

Sorry I didn't found in docs, but here on issues, but I notice only now that is a very old issue.. Anyway here you mention that:

https://github.com/BorisMoore/jsrender/issues/77#issuecomment-4436382 https://github.com/BorisMoore/jsrender/issues/86#issuecomment-4434235

I am using JsRender v1.0.7 VERSION FOR WEB

Thanks for your example, I tested your code and works fine, https://jsfiddle.net/mqj9k6fu/

Then something wrong in my code, I will double check what happen.

thewebartisan7 commented 4 years ago

It works fine now.. without any change on my code.. not sure what I was doing when not work.

Thanks for your help.