GitHub
Twittereither-or
A converter that two-way binds to a checkbox two values provided as arguments. This converter is useful when you have a binary decision between two fixed values.
either-or(~chosen, a, b)
When the getter is called, gets the value of the chosen compute and if it is equal to a, returns true, otherwise it returns false.
When the setter is called, if the new value is truthy, sets the chosen can-compute to a’s value, otherwise sets it to b’s value.
<span>Favorite superhero:</span>
<input type="checkbox" checked:bind="either-or(~chosen, 'Batman', 'Superman')"> Batman?
Parameters
- chosen
{can-compute}:A compute where the chosen value (between
aandbis stored). When the setter is called, this compute’s value will be updated. - a
{*}:The
truevalue. If the checkbox is checked, then a’s value will be stored in the chosen compute. - b
{*}:The
falsevalue. If the checkbox is unchecked, then b’s value will be stored in the chosen compute.
Returns
{can-compute}:
A compute that will be used by can-stache-bindings as a getter/setter bound to the element or a component's viewModel.
Use
either-or is made to be used with <input type=checkbox> elements when there is a binary decision that can be made (so that multiple radio buttons are not needed).
You pass 3 arguments to this converter. The first argument is a compute that represents the chosen value. The second argument is the default, truthy, value. And the third argument is the falsey value.
<p>
<input type="checkbox"
checked:bind="either-or(~pref, 'Star Trek', 'Star Wars')" />
<span>Star Trek</span>
</p>
<p>Your fandom: {{pref}}</p>
var template = stache.from("demo-template");
var fan = new DefineMap({
pref: "Star Trek"
});
document.body.appendChild(template(fan));
// User unchecks the checkbox
fan.pref === "Star Wars";
// Changing the value in code:
fan.pref === "Star Trek";
// Checkbox is now checked again.