Does jsRender supports if statments like below ?
{{ if val > 1 }}
....
{{ /if }}
I couldn't find any examples.
Also I understand that there is a variant of using helper functions.
Yes, see www.jsviews.com/#iftag.
In fact you can write {{if pathOrExpr}} where path can be any combination of 'data paths' and reqular javascript operators etc.
The example shows {{if members && members.length}} and similarly you can do all the expected conditional expressions such as:
address.zip === '88888', or:
foo.count < 3 && foo.total >= bar.total,
etc. etc.
Related
i'm new in Django. i'm really curious to Django template language. i have used jinja2 before Django template language. Some people says that jinja2 and Django template language are the same. But i stuck on if statement on Django template language. usually when we are comparing some value to "True" we are usually not using "==" :
{% if somevalue %}
.....
{% endif %}
instead of....
{% if somevalue == true %}
.....
{% endif %}
i can't do the first method... why ???
Jinja templates took inspiration from (copied and extended) Django templates which is why they are similar in many ways.
The first "if" block will be rendered if somevalue is "truthy" (not False, 0, blank string, empty collection or objects class has a __bool__ method that is returning True) and the second "if" block will be rendered if somevalue is equal to True which would be when somevalue is either True or 1
How can I have an inline conditional expression in a Handlebars template?
There is a way to do that within a "native" way? I mean, without registering a custom helper?
For example, I've been playing with the code (with the parenthesis and without them):
<select name="alignment">
<option value="left" {{ #if (options.text_alignment == 'left') }}selected="selected"{{ /if }}>Left</option>
<option value="center" {{ #if (options.text_alignment == 'center') }}selected="selected"{{ /if }}>Center</option>
<option value="right" {{ #if (options.text_alignment == 'right') }}selected="selected"{{ /if }}>Right</option>
</select>
but it doesn't work at all and throws the error:
Error: Parse error on line 20:
...ion value="left" {{ #if (options.text_al
-----------------------^
Expecting 'ID', 'DATA', got 'INVALID'
[Break On This Error]
throw new Error(str);
So, how I can have an inline conditional statement in the form of if/else structures or the classic ternary operator (var == value)?'yes':'no'
Thanks in advance.
Finally, I was able to accomplish that but I've to say it, in a not nice way :(
I registered a custom helper like the following:
// Need to mark selected option inside a select.
Handlebars.registerHelper('select', function(variable, value) {
if (variable == value) {
return new Handlebars.SafeString('selected=selected');
}
else {
return '';
}
});
This custom helper can be used like that:
{{select option 'right'}}
where option is the variable to be tested and 'right' the value against it is tested.
If later anyone come with a nice solution that works also for radios & checkboxes please, add the answer that I will be happy to vote up them :D
inline if statement:
<div class="message {{if isImportant 'important' 'unimportant'}}"></div>
As far as I know, this is the only way you can do it without registering a custom helper.
Handlebars.js Else If
I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio.
I want to make a condition like this:
if video.yt$aspectRatio equals widescreen then
element's attr height="270px"
else
element's attr height="360px"
I'm iterating the videos using ng-repeat. Have no idea what should I do for this condition:
Add a function in the scope?
Do it in template?
Angularjs (versions below 1.1.5) does not provide the if/else functionality . Following are a few options to consider for what you want to achieve:
(Jump to the update below (#5) if you are using version 1.1.5 or greater)
1. Ternary operator:
As suggested by #Kirk in the comments, the cleanest way of doing this would be to use a ternary operator as follows:
<span>{{isLarge ? 'video.large' : 'video.small'}}</span>
2. ng-switch directive:
can be used something like the following.
<div ng-switch on="video">
<div ng-switch-when="video.large">
<!-- code to render a large video block-->
</div>
<div ng-switch-default>
<!-- code to render the regular video block -->
</div>
</div>
3. ng-hide / ng-show directives
Alternatively, you might also use ng-show/ng-hide but using this will actually render both a large video and a small video element and then hide the one that meets the ng-hide condition and shows the one that meets ng-show condition. So on each page you'll actually be rendering two different elements.
4. Another option to consider is ng-class directive.
This can be used as follows.
<div ng-class="{large-video: video.large}">
<!-- video block goes here -->
</div>
The above basically will add a large-video css class to the div element if video.large is truthy.
UPDATE: Angular 1.1.5 introduced the ngIf directive
5. ng-if directive:
In the versions above 1.1.5 you can use the ng-if directive. This would remove the element if the expression provided returns false and re-inserts the element in the DOM if the expression returns true. Can be used as follows.
<div ng-if="video == video.large">
<!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
<!-- code to render the regular video block -->
</div>
In the latest version of Angular (as of 1.1.5), they have included a conditional directive called ngIf. It is different from ngShow and ngHide in that the elements aren't hidden, but not included in the DOM at all. They are very useful for components which are costly to create but aren't used:
<div ng-if="video == video.large">
<!-- code to render a large video block-->
</div>
<div ng-if="video != video.large">
<!-- code to render the regular video block -->
</div>
Ternary is the most clear way of doing this.
<div>{{ConditionVar ? 'varIsTrue' : 'varIsFalse'}}</div>
Angular itself doesn't provide if/else functionality, but you can get it by including this module:
https://github.com/zachsnow/ng-elif
In its own words, it's just "a simple collection of control flow directives: ng-if, ng-else-if, and ng-else." It's easy and intuitive to use.
Example:
<div ng-if="someCondition">
...
</div>
<div ng-else-if="someOtherCondition">
...
</div>
<div ng-else>
...
</div>
You could use your video.yt$aspectRatio property directly by passing it through a filter, and binding the result to the height attribute in your template.
Your filter would look something like:
app.filter('videoHeight', function () {
return function (input) {
if (input === 'widescreen') {
return '270px';
} else {
return '360px';
}
};
});
And the template would be:
<video height={{video.yt$aspectRatio | videoHeight}}></video>
In this case you want to "calculate" a pixel value depending of an object property.
I would define a function in the controller that calculates the pixel values.
In the controller:
$scope.GetHeight = function(aspect) {
if(bla bla bla) return 270;
return 360;
}
Then in your template you just write:
element height="{{ GetHeight(aspect) }}px "
I agree that a ternary is extremely clean. Seems that it is very situational though as somethings I need to display div or p or table , so with a table I don't prefer a ternary for obvious reasons. Making a call to a function is typically ideal or in my case I did this:
<div ng-controller="TopNavCtrl">
<div ng-if="info.host ==='servername'">
<table class="table">
<tr ng-repeat="(group, status) in user.groups">
<th style="width: 250px">{{ group }}</th>
<td><input type="checkbox" ng-model="user.groups[group]" /></td>
</tr>
</table>
</div>
<div ng-if="info.host ==='otherservername'">
<table class="table">
<tr ng-repeat="(group, status) in user.groups">
<th style="width: 250px">{{ group }}</th>
<td><input type="checkbox" ng-model="user.groups[group]" /></td>
</tr>
</table>
</div>
</div>
<div ng-if="modeldate==''"><span ng-message="required" class="change">Date is required</span> </div>
you can use the ng-if directive as above.
A possibility for Angular:
I had to include an if - statement in the html part, I had to check if all variables of an URL that I produce are defined. I did it the following way and it seems to be a flexible approach. I hope it will be helpful for somebody.
The html part in the template:
<div *ngFor="let p of poemsInGrid; let i = index" >
<a [routerLink]="produceFassungsLink(p[0],p[3])" routerLinkActive="active">
</div>
And the typescript part:
produceFassungsLink(titel: string, iri: string) {
if(titel !== undefined && iri !== undefined) {
return titel.split('/')[0] + '---' + iri.split('raeber/')[1];
} else {
return 'Linkinformation has not arrived yet';
}
}
Thanks and best regards,
Jan
ng If else statement
ng-if="receiptData.cart == undefined ? close(): '' ;"
I need to display a portion of HTML on the following condition,
var1=="google" and var2 is True
I wrote the following code ,
{% ifequal var1 "google" and var2 %}
/*HTML CODE */
{% endif %}
and i got an error
TemplateSyntaxError at /process/apply.html
u'ifequal' takes two arguments
I know i can split the above two nested IF statements,still is there a way in django to combine them to a single if statement?
From django ifequal documentation
It is only possible to compare an argument to template variables or strings. You cannot check for equality with Python objects such as True or False. If you need to test if something is true or false, use the if tag instead.
So if you want to check for True or False, so need to use if.
{%if var1 == "google" and var2 %}
....
{%endif%}
I am trying to add a trailing 's' to a string unless the string's last character is an 's'. How do I do this in a Django template? The [-1] below is causing an error:
{{ name }}{% if name[-1] != "s" %}s{% endif %}
try the slice filter
{% if name|slice:"-1" != "s" %}
{% if name|slice:"-1:"|first != "s" %}s{% endif %}
Django's slice filter doesn't handle colon-less slices correctly so the slice:"-1" solution does not work. Leveraging the |first filter in addition, seems to do the trick.
The Django template system provides tags which function similarly to some programming constructs – an if tag for boolean tests, a for
tag for looping, etc. – but these are not simply executed as the
corresponding Python code, and the template system will not execute
arbitrary Python expressions.
Use the slice built-in filter.
Not sure if this is what you're looking for, but django has a built-in template filter that pluralizes words. It's called just that: pluralize.
You'd want something like this:
{{name | pluralize}}
Take a look at https://docs.djangoproject.com/en/dev/ref/templates/builtins/
{% if name|last != "s" %} does the job