knockout-else

knockout-else
=============

else/elseif binding for Knockout

Re. https://github.com/knockout/knockout/issues/962
Originally from http://jsfiddle.net/bmh_ca/hyrvtps4/

$3

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.

$3

#### Two block elements

``html


!X

`

#### Two virtual elements
`html

X is truthy


X is not truthy.

`

#### An Element + virtual else
`html




X is false or arr is empty/undefined.

`


#### A virtual if and else-element
`html





`

#### else and else-if
`html
X is true
X is not true, but Y is.



It's all pie.
`

#### 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 and .

You need to pass inlineElse: true to the init function to turn this feature on.

You can use inline short-hand with regular tags:
`html



`

... and with virtual elements:
`html
X
Y
~X and ~Y

`

The else/elseif comments will be rewritten as:

`html
X

Y

~X and ~Y

`

The else and elseif bindings then add inner conditionals, resulting in a DOM tree that looks like this:

`html


X



Y




~X and ~Y



`

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,

$3

You likely do not need to specify any, but the options are:

| Argument | Default | Meaning
|--- | --- | ---
| inlineElse | false | When truthy the and short-hands will be enabled.
| elseBindingName | else | or falsy The name of the binding for 'else'; falsy to disable.
| elseIfBindingName | elseif | 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