Knockout Js render differently with if data-bind based on a Json value

Question

I've got a similar to the below code and i want to render differently the capital with cityName Barnsley and differently a city with some other name. What is the right way to do the if binding? Do i have to put cityName as observable to work?

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

Ok Still no success My json is this:

var Images = {
    "ImageInfo": [
        {
            "thumbs": [
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "img"
                },
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "video"
                }
            ]
        },
        {
            "thumbs": [
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "img"
                },
                {
                    "IMAGE": "url(http://...d38508d4f183.jpg)",
                    "type": "video"
                }
            ]
        }
    ]
};

The HTML i want to achieve is the below:

    <div id="Images">
        <div data-bind="foreach: ViewModelB">

            <div data-bind="foreach: thumbs">
                <div data-bind="if: type == 'img'">
                    <a style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></a>
                </div>
                <div data-bind="if: type == 'video'">
                    <p style="width: 50px; height: 50px; float: left; display: block; background-size: cover; margin-left: 15px; cursor: pointer;" data-bind="style: { backgroundImage: IMAGE_PATH }"></p>
                </div>
            </div>
        </div>
    </div>
<script>
var ViewModelB = ko.mapping.fromJS(Images);
        ko.applyBindings(ViewModelB, document.getElementById("Images"));
</script>

Any help will be much appreciated!

Answer 1

You are almost there, it doesnt have to be observable if its not going change later on, you can do if statements and render differently , something like below

<ul data-bind="foreach: planets">
    <li>
        Planet: <b data-bind="text: name"> </b>
        <div data-bind="if: capital">
              <!-- ko if:capital.cityName=='Barnsley' -->
            Capital: <b data-bind="text: capital.cityName"> </b>
              <!-- /ko -->
             <!-- ko if:capital.cityName=='asdad' -->
            Capital: <i data-bind="text: capital.cityName"> </b>
              <!-- /ko -->
        </div>
    </li>
</ul>

Or you can also do switch case https://github.com/mbest/knockout-switch-case