We Keep Coding

JS Modified Ternary Operator?

I am aware of the JavaScript ternary operator condition? optionA : optionB and now I am seeing {{option: condition}} in Vue, and the behaviour seems to be that if condition holds the assignment is option, otherwise the assignment is empty. Is this 'binary' operator : something general for JS or particular to Vue?
The actual code:
<span :class="{ done: todo.done }">{{ todo.text }}</span>
where
.done { text-decoration: line-through; }
is a CSS and todo.done is a boolean.

It's not an operator but regular object literal syntax. Vue class attribute supports objects for conditional class lists, where boolean value determines whether class name from a key is added to a list or omitted.
This behaviour is similar to popular classnames package that serves the same purpose in React ecosystem.

If you wanted a binary operator, you should choose ||. This object syntax is not specific to vue but the usage is: What this code is saying is "Set the attribute done of the object bound to the class to todo.done, and vue will infer to add or not to add the class of the object parameter (in your case it is done).

Add or remove a class based on a condition

I am adding / removing a class from an element’s classList based on a variable’s truthiness. However, I’m doing it in what appears to be an obtuse way:
if (myConditionIsMet) {
myEl.classList.add("myClass");
} else {
myEl.classList.remove("myClass");
}
Is there a way in which I could make this more sexy and dynamically call the add / remove chained function for example with a conditional operator such as:
myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};
The above is pseudocode, of course, and I would like as plain JS as possible.

There’s a toggle method on .classList which takes a second argument (force).
This boolean argument essentially takes a condition that adds the class if true, and removes the class if false.
myEl.classList.toggle("myClass", myConditionIsMet);

Your pseudocode js
myEl.classList.{myConditionIsMet ? add('myClass') : remove('myClass')};
can be translated to actual js
myEl.classList[myConditionIsMet ? 'add' : 'remove']('myClass');
which is not particularly readable, but does exactly what you described.
For readability, I would look at the toggle method.

Multiple class bindings in AlpineJS?

I'm trying to attach two :class bindings to a single element within an x-for loop. Usually this could be achieved by passing in a single object with multiple key:value pairs. In this instance however, one is a condition, the other is a property of the loop:
Condition:
:class="{'active': colours.includes(arrayItem.class)}"
Property:
:class="arrayItem.class"
Both of which work separately. I've tried adding them as separate attributes but only the first gets applied. I've also tried this (to no avail):
:class="{'active': colours.includes(arrayItem.class), arrayItem.class}"
I've searched through the docs but haven't found a solution.
Example:
https://jsfiddle.net/owjbu1ay/10/

You can use the array of classes when binding to the class attribute. The issue here is the object syntax {} here. You can use array of classes and use the ternary operator to conditionally render classes as shown below.
Now if the colours array includes the arrayItem.class it will apply the active class,
and the arrayItem.class will be the 2nd class applied without any conditions.
:class="[colours.includes(arrayItem.class) ? 'active' : '' , arrayItem.class]"

addClass(undefined) vs. addClass(null)

Sometimes I'd like to add class in chain, under some condition. What value would be semantically most appropriate to add no class?
Example:
$(".element").doSomething().addClass(condition ? "special-class" : undefined).doSomethingElse();
Or:
$(".element").doSomething().addClass(condition ? "special-class" : null).doSomethingElse();

Use $.toggleClass() instead:
$(".element").doSomething().toggleClass("special-class",condition).doSomethingElse();
As ruakh mentioned it, there is a difference. If condition is falsy, it will actually remove the class if it was present before. With your logic, the class can only be added, not removed.

jQuery checks input parameter like this:
typeof input == "string"
so either null or undefined will behave the same way

complex ng-class expression containing both a value and a conditional

Say I wanted to have an ng-class do two things:
1) populate a value from a variable like so
`ng-class="myAwesomeJavaScriptVariable"`
and
2) conditionally set a predefined class:
`ng-class = "{awesomeClass: myAwesomeBoolean}`
I am aware that I could do something like
class="{{myAwesomeJavaScriptVariable}}" ng-class="{awesomeClass: myAwesomeBoolean}"
How (if this is even possible) could I amalgamate those two into a single ng-class expression?

I think it might be:
data-ng-class = "{ myAwesomeJavaScriptVariable, awesomeClass: myAwesomeBoolean }"
Alternatively:
class = "{{ myAwesomeJavaScriptVariable}} left clearfix" data-ng-class="{awesomeClass: myAwesomeBoolean }"

#Abraham P:
To Set Both the Conditional Statement and Scope Variable as Class
ng-class="[{awesomeClass: myAwesomeBoolean},myAwesomeJavaScriptVariable]"
This Will Work Fine.