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

i've got similar below code , want render differently capital cityname barnsley , differently city other name. right way if binding? have put cityname observable 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 json 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 want achieve 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 appreciated!

you there, doesnt have observable if not going change later on, can if statements , render differently , 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 can switch case https://github.com/mbest/knockout-switch-case