SWITCH/CASE bindings for Knockout
Knockout includes only the if
and ifnot
bindings for control flow. The switch
and case
bindings provide a flexible and powerful control flow mechanism that can simplify your code.
Let's start with some examples. Here we want to display a different message based on a status value:
<div data-bind="switch: orderStatus">
<div data-bind="case: 'shipped'">
Your order has been shipped. Your tracking number is <span data-bind="text: trackingNumber"></span>.
</div>
<div data-bind="case: 'pending'">
Your order is being processed. Please be patient.
</div>
<div data-bind="case: 'incomplete'">
Your order could not be processed. Please go back and complete the missing data.
</div>
<div data-bind="case: $default">
Please call customer service to determine the status of your order.
</div>
</div>
Here's an equivalent example using source data values:
<div data-bind="switch: true">
<div data-bind="case: trackingNumber">
Your order has been shipped. Your tracking number is <span data-bind="text: trackingNumber"></span>.
</div>
<div data-bind="case: isReady">
Your order is being processed. Please be patient.
</div>
<div data-bind="casenot: isComplete">
Your order could not be processed. Please go back and complete the missing data.
</div>
<div data-bind="case: $else">
Your order could not be processed. Please go back and complete the missing data.
</div>
</div>
A switch block can contain any number of case blocks. No more than one case block will be used. The contents of the remaining blocks will be cleared. Both switch
and case
take a single parameter. In most cases the values of the two parameters are matched against each other to determine which case block to use. The first block (top-down) to match is used; subsequent blocks are cleared. Here, in detail, is how the values are matched:
- If the case value is the special value
$else
or$default
, the block is used if no non-default blocks were used. There can be multiple blocks with$else
or$default
and they can be in any order. - If the switch value is boolean (
true
orfalse
), each case value's "truthiness" is matched against the switch value. - If the case value is boolean (and the switch value is not boolean), the case value is used as is. The special variable
$value
can be used in a case expression to refer to the switch value. The block will be used if the expression is true. - If the case value is an array, the block will be used if the switch value matches (strict) an item in the array.
- Otherwise, the block will be used if the case value matches the switch value (loose comparison).
If you want a block to be used based on the parameter not matching, you can use the casenot
binding. This works similarly to case
, except that the result of the value matching is reversed.
Here are some more examples. This example demonstrates items 1, 3, 4, and 5 above and uses container-less bindings:
<!-- ko switch: somevalue -->
<!-- ko case: $default -->
Value doesn't match
<!-- /ko -->
<!-- ko case: 'foo' -->
Value is foo
<!-- /ko -->
<!-- ko case: 'bar' -->
Value is bar
<!-- /ko -->
<!-- ko case: ['baz', 'qux'] -->
Value is either baz or qux
<!-- /ko -->
<!-- ko case: $value.length == 3 -->
Value is a three-letter word
<!-- /ko -->
<!-- /ko -->
This example demonstrates item 2 (also see the second example above):
<!-- ko switch: isReady -->
<div data-bind="case: true">You are ready!</div>
<div data-bind="case: false">You are not ready!</div>
<!-- /ko -->
You can use the case.visible
and casenot.visible
bindings to conditionally show an element. For example:
<!-- ko switch: true -->
<p data-bind="case.visible: isReady">You are ready!</p>
<p data-bind="case.visible: $else">You are not ready!</p>
<!-- /ko -->
When using Knockout 3.0+, you do not need to include the true
value for the switch
binding. For example:
<!-- ko switch -->
<!-- ko case: 'abc' -->Value matched<!-- /ko -->
<!-- ko case: $else -->Value didn't match<!-- /ko -->
<!-- /ko -->
ko.bindingHandlers.switch.makeCaseHandler
can be used to create new bindings that control any UI aspect. It returns a new binding handler object that you should assign to a ko.bindingHandlers
property. It takes three parameters:
-
binding
This is the name of the binding to wrap (case
wraps theif
binding, for example). -
isNot
(optional) If set to true, the new binding will reverse the result of the value matching (likecasenot
). -
makeValueAccessor
(optional) If the wrapped binding needs the value specified in a certain format, you can provide a function that accepts avalue
parameter and returns avalueAccessor
function. The default looks like this:function (value) { return function() { return value } }
License: MIT (http://www.opensource.org/licenses/mit-license.php)
Michael Best
https://github.com/mbest
mbest@dasya.com