Question

I have issue to dynamically create list(ol or ul). The problem I face is that sometimes I need ordered list and sometimes un-ordered depending upon the JSON. I am using knockout, Here is my html,

<ol data-bind="foreach: items" ><li><a data-bind="text: $data"></a></li></ol>

Here is my JSON,

{
   items: ['a','b','c'],
   orderedList: true
}

You can see that orderedList may be true or false. If true then I need to use ol and if false I need to use ul. I also to avoid replication. Any way to do this.

Answer 1

Here is a crude sample I put together, was not able to test it. But you can get the idea.

<!-- ko if : orderedList -->
<ol>
<!-- /ko -->
<!-- ko ifnot : orderedList -->
<ul>
<!-- /ko -->
<!-- ko foreach: items -->
<li><a data-bind="text: $data"></a></li>
<!-- /ko -->
<!-- ko if : orderedList -->
</ol>
<!-- /ko -->
<!-- ko ifnot : orderedList -->
</ul>
<!-- /ko -->

EDIT: There is no if-else condition in knockout. So you will have to rely on using multiple Ko if statements.

EDIT2: The version of the code that worked for the OP.

<!-- ko if : orderedList -->
<ol data-bind="foreach: items">
    <li><a data-bind="text: $data"></a></li>
</ol>
<!-- /ko -->
<!-- ko ifnot : orderedList -->
<ul data-bind="foreach: items">
    <li><a data-bind="text: $data"></a></li>
</ul>
<!-- /ko -->