foreach binding repeat section written inside it. This is useful to rendering table , lists,
Firstly, we will check with static array then we will go dynamic.
Continue reading “The “foreach” binding in Knockout js”The “if” and “ifnot” bindings in knockout
If and ifnot binding are easy as other programming language has.
Note : knockout js has not else condition instead of it has to use ifnot.
ifnot inverts the result of the expression passed for validation.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<ul data-bind="foreach: planets"> <li> Planet: <b data-bind="text: name"> </b> <div data-bind="if: capital"> Capital: <b data-bind="text: capital.cityName"> </b> </div> </li> </ul> <script> ko.applyBindings({ planets: [ { name: 'Mercury', capital: null }, { name: 'Earth', capital: { cityName: 'Barnsley' } } ] }); </script> |
Use of if and ifnot without containers.
|
1 2 3 4 5 6 |
<ul> <li>This item always appears</li> <!-- ko if: x > 50 --> <li>I want to make this item present/absent dynamically</li> <!-- /ko --> </ul> |