Knockoutjs 3.X API Fourth chapter of data Control flow if binding and ifnot binding _javascript techniques

If binding purpose

If binding is typically the value of a property or expression followed by a data-bind=if:attribute,if (or a bool value, or True when a non-empty string), the if binding acts like a visible binding. You can control the display and hiding of the DOM, and the difference is that if binding is physical deletion or adding DOM elements.

Example 1

This example shows the dynamic deletion of the IF binding add DOM:

Display message

UI Source code:

<label><input type= "checkbox" data-bind= "Checked:displaymessage"/> Display message</label>
<div data-bind= "If:displaymessage" >here is a message. Astonishing.</div>

View Model Source:

Ko.applybindings ({
displayMessage:ko.observable (false)
});

Example 2

In this example, the planets monitors the property array through a foreach binding loop where capital is null in the project with name Mercury, and the item in the loop displays only its name.

<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>

Note: Use an if binding without a container (if virtual binding)

Like the previous virtual bindings, the same uses the <!--Ko--> and <!--/ko-->. Virtual bindings apply to situations that do not change UI elements.

<ul>
<li>this Item always appears</li>
<!--ko If:someexpressiongoeshere-->
<li>i want to make this item present/absent dynamically</li>
<!--/ko-->
</ul>

Ifnot binding

Ifnot binding is the reverse expression of if binding, which is the same as if binding, except that the result is the opposite of the If integer. Just like equals and not equal. For example:

<div data-bind= "Ifnot:someproperty" >...</div>

The equivalent wording is:

<div data-bind= "if:!someproperty ()" >...</div>

One would say that using if binding is sufficient. For wool also to ifnot binding. The reason is that there are a lot of OCD patients like this ifnot binding way, looks more understandable, the code more neat.

The above is a small set to introduce the Knockoutjs 3.X API Fourth chapter of the data control flow if binding and ifnot binding, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!