knockout-else
v1.0.12
Published
else/elseif for Knockout
Downloads
735
Readme
knockout-else
else/elseif binding for Knockout
Re. https://github.com/knockout/knockout/issues/962 Originally from http://jsfiddle.net/bmh_ca/hyrvtps4/
Get started
Get it with npm install knockout-else
or bower install knockout-else
.
Include the dist/knockout-else.js
, then init with KnockoutElse.init([spec={}])
.
It should work fine in the ordinary with AMD/CommonJS.
How to use
Two block elements
<div data-bind='if: x'>X</div>
<div data-bind='else'>!X</div>
Two virtual elements
<!-- ko if: x -->
X is truthy
<!-- /ko -->
<!-- ko else -->
X is not truthy.
<!-- /ko -->
An Element + virtual else
<div data-bind='template: {if: x, foreach: arr}'></div>
<!-- ko else -->
X is false or arr is empty/undefined.
<!-- /ko -->
A virtual if and else-element
<!-- ko foreach: arr -->
<!-- /ko -->
<div data-bind='else'>
arr is empty or undefined.
</div>
else and else-if
<!-- ko if: x -->X is true<!-- /ko -->
<!-- elseif: y -->X is not true, but Y is.<!-- /ko -->
<div data-bind='elseif: z'>Z, but not X nor Y.</div>
<!-- else -->It's all pie.<!-- /ko -->
inline else/else-if short-hand
Within an if
, ifnot
and foreach
bindings, one can use HTML comments to indicate else
and elseif
. These are respectively rewritten as <!--/ko--><!--ko else-->
and <!--/ko--><!-- ko elseif: expression -->
.
You need to pass inlineElse: true
to the init
function to turn this feature on.
You can use inline short-hand with regular tags:
<div data-bind='if: x' -->
X
<!-- elseif: y -->
not X but Y
<!-- else -->
Neither X nor Y
</div>
... and with virtual elements:
<!-- ko if: x -->X
<!-- elseif: y -->Y
<!-- else -->~X and ~Y
<!-- /ko -->
The else
/elseif
comments will be rewritten as:
<!-- ko if: x -->X
<!--/ko-->
<!-- ko elseif: y -->Y
<!--/ko-->
<!-- else -->~X and ~Y
<!-- /ko -->
The else
and elseif
bindings then add inner conditionals, resulting in a DOM tree that looks like this:
<!--ko if: x-->
<!--ko __ko_if: __elseWrapperValueAccessor__()-->
X
<!--/ko-->
<!--ko elseif: y-->
<!--ko __ko_if: __elseCondition__-->
Y
<!--/ko-->
<!--/ko-->
<!-- ko else -->
<!--ko __ko_if: __elseCondition__-->
~X and ~Y
<!--/ko-->
<!-- /ko -->
<!--/ko-->
The __elseCondition__
is a computed value that is true when the prior conditions are false and, in the case of elseif
the given conditional is true.
The "inline else/if" short-hand replaces the knockout
bindings for if
, ifnot
, foreach
and template
.
The original bindings if
, ifnot
, template
and foreach
are
accessible still through ko.bindingHandlers.__ko_BINDING
e.g. ko.bindingHandlers.__ko_if
,
spec
argument for init
You likely do not need to specify any, but the options are:
| Argument | Default | Meaning
|--- | --- | ---
| inlineElse | false
| <bool>
When truthy the <!-- else -->
and <!-- elseif: -->
short-hands will be enabled.
| elseBindingName | else
| <string> or falsy
The name of the binding for 'else'; falsy to disable.
| elseIfBindingName | elseif
| <string> or falsy
The name of the binding for 'elseif'; falsy to disable.
ES5 things
The following will need to be shimmed for older browser support (i.e. IE8 and lower):
- Object.keys
Changelog
- 6 Dec 2015 🌵 — Merge #3 — Fix memory leak