CODEWITHSUNDEEP
javascriptjqueryhtmlknockout.js
user2281858
user2281858

Reputation: 1997

conditional data-binding - knockout

I am making an li tag. And on one of the li tag, I want it to be formed only when it contains a certain value.
In HTML, not javascript.

This is the code:

<ul>
    <li><a href="#">Index</a></li>
    <li><a data-bind="text:orgChart().category[0].Name, attr: { href: category[0].Name.url }"></a></li>
    <li data-bind="text:orgChart().Name"></li>
</ul>

Now, I want to form the second li tag only if the orgChart().category[0].Name has certain value. Else only two li tags will be formed.

Upvotes: 1

Views: 361

Answers (2)

Alex J.
Alex J.

Reputation: 126

You can use the "if" binding

<ul>
    <li><a href="#">Index</a></li>
    <!-- ko if: ko.unwrap(orgChart().category[0].Name)=="smth" -->
    <li><a data-bind="text:orgChart().category[0].Name, attr: { href: category[0].Name.url }"></a></li>
    <!-- /ko -->
    <li data-bind="text:orgChart().Name"></li>
</ul>

Upvotes: 0

Dandy
Dandy

Reputation: 2177

Thats coming straight from the docs

<ul>
    <li>This item always appears</li>
    <!-- ko if: someExpressionGoesHere -->
        <li>I want to make this item present/absent dynamically</li>
    <!-- /ko -->
</ul>

Upvotes: 2

Related Questions