EDIT: Due to the general syntax of AlpineJS, writing a ternary operator inside curly brackets is a mistake you may easily run into.
This is just a "grammar" issue but I really want to figure it out... Let's jump into it.
Everything is ok if I write:
:class="{ 'some_class': activeSlide == slide }"
On the contrary it doesn't work (i.e. 'some_class' is not added as a class) if I write:
:class="{ activeSlide == slide ? 'some_class' : '' }"
What's wrong with it?
(I don't think it's relevant, but you can have a look at the entire code here, inside 'template' tags: link)
The ternary operator works only with the non-object class syntax:
:class="activeSlide == slide ? 'some_class' : ''"
You can use the shorthand conditionals as well:
:class="activeSlide == slide && 'some_class'"
Related
So I have this button, and x-data for a parent div had this: days: {SUN: false}. It finds the variable so no problem. Here is the button:
<button type="button" class="date-btn" #click="days[$el.textContent] = !days[$el.textContent]; alert(days[$el.textContent])" :class="{'bg-blue-800' ? days[$el.textContent]: ''}">SUN</button>
The alert shows that the value switches from true and false on click, but the color of the button never changes.
Here is my .date-btn styles, but even stripping it dry except of m and px gives the same result:
#layer components {
.date-btn {
#apply m-2 px-7 py-3 text-white font-medium text-sm leading-snug
uppercase rounded shadow-md hover:shadow-lg
focus:shadow-lg focus:outline-none focus:ring-0
active:shadow-lg transition duration-150 ease-in-out drop-shadow-lg;
}
}
I also did :class="'bg-blue-800' ? days[$el.textContent]: ''" but no banana.
What is wrong with my :class call?
The input of the ternary operator should be a condition:
:class="days[$el.textContent] ? 'bg-blue-800' : ''"
You can also use a shorthand version:
:class="days[$el.textContent] && 'bg-blue-800'"
I'd have a read in the docs. x-bind, what is what you're using when using the shorthand :class, uses booleans to define what class to bind. As per example you've given, you've mixed up the ternary statement and object syntax. This won't ever result in anything. However, say you hadn't wrapped it in an object, then it would still fail, since 'bg-blue-800' is always truthy, which will always bind '' as class.
If you want to use a ternary statement, instead you'd have to write it as such: :class="days[$el.textContent] ? 'bg-blue-800' : ''".
Because AlpineJS aims at making life easy, you can also use shorthand syntax to replace the ternary operator. In this case, you could rewrite above example to :class="days[$el.textContent] && 'bg-blue-800'"
The last method you already mention in your own answer. The object class: boolean syntax, which (in my opinion) is the most logical way to write the x-bind is the last possible method to bind elements with. By passing a class as key, and a boolean as value, AlpineJS knows which class(es) to bind.
Ok for some reason this worked :class="{'bg-blue-800' : days[$el.textContent]}"
Shoutout to https://daily.dev/blog/alpine-js-the-ultimate-guide
pretty straigth forward. I would like to know if I can use tenary operators or null coalesce operators when I pass an attribute to a child component in blade.
For example
<x-filter :categories="{{ isset($categories) ? $categories : false }}" />
or
<x-filter :categories="{{ $categories ?? false }}" />
I have not been successful with this in laravel 8.
Am I having an error in syntax or is this just not possible?
Best Simon
TL;DR:
Use {{ }} OR : but not both of them
When you place a : before the attribute this means you are writing php within your double quotes, so as #lagbox mentioned in his comment just remove it. OR remove the colon and you are good to go, nothing fancy here.
I encountered a problem that need to write some HTML codes in ternary operator in Thymeleaf. In where I need to chose an anchor link by using ternary operator. For better understand, I putted those problematic code in below:
<span th:text="${error_code == '404'} ? 'Home' : 'Login'"></span>
So, how can I wirte those code correclty in Themeleaf
This should do it :
<span th:utext="((${error_code} == '404') ? '<a href="http://localhost:8080/home">Home</a>' : '<a href="http://localhost:8080/login">Login</a>')"></span>
" is for escaping double quote in html.
utext is to tell thymeleaf not to print plain text as "< a href.. "
I'm trying to do an inline if with Ruby Slim.
Given my example below...
- if #droppable
.panel data-draggable="true"
span More content here
- else
.panel
span More content here
In both cases, the only difference is the presence of the data-draggable attribute on the top-level .panel element. The contents of the .panel is identical, so I'd like to accomplish something like the following:
.panel (#droppable ? data-draggable="true")
span More content here
Is there a way of achieving this in Slim?
There is no need for an if here, and the ternary operator requires three operands, not two.
Both Slim and HAML are designed to omit attributes with nil/false values, intentionally letting you use the && operator to turn a truthy/falsy value to the presence of attribute with a specific value, or its absence:
In Slim:
.panel data-draggable=(#droppable && "true")
span Hello
In HAML:
.panel{data: {draggable: #droppable && "true"}}
%span Hello
In both cases, if #droppable is a truthy value, data-draggable="true" will be added, otherwise the attribute will be omitted.
Use dynamic tags:
ruby:
def panel!
{tag: 'panel'}.tap do |tag|
tag[:"data-draggable"] = true if #droppable
end
end
*panel!
span hello
You can't have an "inline if" , but you can get the behavior you want with slim in line html support
doing this:
<div class="cool_class"
- if conditional_is_met
| data="must_be_added"
| special_data="#{#my_data.to_json}"
|
</div>
consider that inside the html tag the slim identation is still followed.
and the final | is important to close the if.
{if $GLOBALS.current_user.group.id != "Employer"}
<li><a href="{$GLOBALS.site_url}/find_jobs/" >[[Find Jobs]]</a></li>
<li class="sep"></li>
<li><a href="{$GLOBALS.site_url}/add_listing/?listing_type_id=Resume" >[[Post Resumes]]</a></li>
<li class="sep"></li>
{/if}
Just trying to figure out this code. I think it is saying "If the current user IS? or ISN'T? a member or the group 'employer' put the following links in..."
Which is it?
Thanks
!= means is not equal to, the exclamation point (!) is a negation operator:
$a = 5;
if ($a == 5) {
// executed if condition is true
}
if ($a != 5) {
// executed if condition is not true
}
!= means "not equals", so "If the current user ISN'T an employer..."
"isn't" (because of the !=)
I suppose this is in some sort of templating language? That isn't what normal PHP looks like. In any case, the != definitely means IS NOT, so it means if the current user IS NOT an employer, insert the links.
!=
not equal
thus if they are not group.id employer then put in the list items and anchor tags
If the id is not equal to "Employer", then condition is satisfied, process inner block which appears to be adding <li>'s to the page
Weird code. But it means Show this html elements if group of current user IS NOT Employer.