GitHub
Twitterequal
A converter that is usually for binding to a <input type="radio"> group, so that a scope value can be set the radio group’s selected value.
equal(~compute, value)
When the getter is called compute, a compute, is compared to value and if they are equal, returns true.
When the setter is called, if the radio is now checked the compute's setter is called with value as the value.
<input type="radio" checked:bind="equal(~color, 'red')" /> Red
<input type="radio" checked:bind="equal(~color, 'blue')" /> Blue
In this example, the color scope value will be set to 'red' when the first radio is selected and 'blue' when the second radio is selected.
Parameters
- compute
{can-compute}:A compute whose value will be compared to the second argument.
- value
{*}:A value of any type, that will be compared to the compute's internal value.
equal(valueOne, valueTwo)
When the getter is called the two values will be compared and if they are equal, returns true.
In this example there is only a one-way binding, parent to child, so there is no setter case. This removes the requirement that the first argument is converted to a compute with ~.
<my-modal show:from="equal(showModal, true)" />
In this example, the show value of my-modal's view model will be set to true when showModal in the scope is set to true.
Parameters
- valueOne
{*}:A value of any type, that will be compared to valueTwo.
- valueTwo
{*}:A value of any type, that will be compared to valueOne.
Use
This converter will most often be used in conjunction with a radio input in order to bind a scope’s value (such as string, but could be any value) based on the selection of the radio group.
In this example we are using objects, to select a captain from one of three players:
{{#each players}}
<input type="radio" checked:bind="equal(~captain, this)" /> {{name}}
{{/each}}
var template = stache.from("demo");
var vm = new DefineMap({
captain: null,
players: [
{ name: "Matthew" },
{ name: "Wilbur" },
{ name: "Anne" }
]
});
vm.captain = vm.players[0];
var frag = template(vm);
document.body.appendChild(frag);