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
$elseor$default, the block is used if no non-default blocks were used. There can be multiple blocks with$elseor$defaultand they can be in any order. - If the switch value is boolean (
trueorfalse), 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
$valuecan 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:
bindingThis is the name of the binding to wrap (casewraps theifbinding, 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 avalueparameter and returns avalueAccessorfunction. 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
[email protected]
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent