Is there a way to selectively apply a class in volt (the Phalcon template engine) based on variables?
I have come to working in volt from js libraries like Angular and Vue, which have structure like:
ng-class="{'active':thing >= 1}"
Where a class is applied based on the statement being true. In Volt I could use if blocks to selectively render html but was wondering if there is a similar syntax?
Is this what you are looking for?
<a class="button {% if something == 12 %}active{% endif %}">Link</a>
Or you can use ternary operators:
<a class="button {{ something == 12 ? 'active' : 'disabled' }}">Link</a>
Related
I want <li></li> or <li aria-current="page"></li> depending on some condition.
I tried:
<li #(current == Model.CurrentPage ? #"aria-current=\"page\"" : "") ></li>
Which gives the incorrect result:
<li aria-current=""page""></li>
There have been many changes in Razor over the years. In v7, is there an easy one-liner way to do this? (Without multiline if/else statements, tag helpers, etc.)
(Note that the boolean attribute rendering trick doesn't work here, as I want <li></li> rather than <li aria-current=""></li>.)
I tried as below:
<li aria-current=#(current==Model.Page? "page":null )></li>
The result:
Is this what you want?
I'm trying to achieve a very basic slide between h2, using vuejs and gsap. I need 2 different types of transitions, based on the direction (next and previous slide). To obtain a compact code, I used the ternary operator ?:
<transition :css="false" #enter="direction ? enterNext : enterPrev">
<h2 :key="currentPage.id">
<NuxtLink
:to="currentPage.to"
:title="currentPage.longTitle"
exact-active-class="is-active"
>
{{ currentPage.title }}
</NuxtLink>
</h2>
</transition>
If I use 2 div with a v-if / v-else syntax, it works well. What am I doing wrong here ? Do I need to format differently what the ternary returns ?
#enter is an event handler. You can pass a function name here like #enter="enterNext" (that's what you probably did before) or valid JS code fragment like #enter="enterNext($event)" (function call)
Your ternary doesn't return anything as it is missing return statement.
Anyway what you probably want is this: #enter="direction ? enterNext() : enterPrev()"
I'm using nunjucks which compile mustache syntax like this : {{ value }}, and I'm using in the same time vue.js, which also use the same syntax for interpolation.
When I use interpolation to bind some value, nunjucks compile it first, which I want to be compiled by vue.js later and not nunjucks, so I was looking for something that I can do to skip interpolation for nunjucks, but with no luck.
A solution I can do here, is to use something else to print the value in vue.js without the use of interpolation, but it seems like it's the only why to print variables in the vue.
Any suggestions on how to solve this ?
There's two ways to do this. I prefer the first way.
1. Tell Nunjucks to ignore {{ }} for a specific portion of code
From the docs: If you want to output any of the special Nunjucks tags like {{, you can use a {% raw %} block and anything inside of it will be output as plain text.
{% raw %}
...put all your Vue template code in here...
{% endraw %}
2. Tell Vue to use different delimeters
new Vue({
el: '#app',
data: data,
delimiters: ["<%","%>"]
});
Then in your Vue templates, use <% someValue %> instead of {{ someValue }}.
Vue 3 has a slightly different syntax, but the concept is the same.
How is it possible to select the proper namespace when translating html attributes? The default syntax is like:
<span i18n="home.title">Title</span>
For instance, in the view model the approach is the following:
this.i18n.tr('invalidName', {ns: 'errors'})
I'm using version 0.5.3 of aurelia-i18n.
The best options I would suggest are:
<span t="errors:invalidName"></span>
<span t="invalidName" t-params.bind="{ns: 'errors'}"></span>
<span>${'errors:invalidName' | t & signal:'aurelia-translation-signal}</span>
<span>${'invalidName' | t:{ns: 'errors'} & signal:'aurelia-translation-signal}</span>
i have a custom template tag that takes some argument and calculates the result.
I want to compare that value obtained from that custom tag with another variable.
Custom template tag(having three arguments)
{% price_for_pax service pax '' %}
variable :
{{service.price}}
What i want is
{% if service.price == price_for_pax service pax '' %}
do something
{% endif %}
When i look for the result it does not show anything
Can i compare like this ? If not what can be the solution ?
Thanks in advance
There were a couple of questions similar to this before:
Django - use template tag and 'with'?
django templatetags template , combine {{ }} method call with template tag context variable
Making a template filter rather than a template tag could do the trick.