How to show the div tag elements based on data bind in the cshtml?

In my JS file, i am able to retrieve the data from backend to the variable : IsAvailable

IsAvailable will return true or false based on back end value.

I am able to bind the data from JS file to CSHTML

  <div class="col-md-9 bold">
        <span id="test" data-bind="text:IsAvailable"></span>
    </div>

Select allOpen in new window

How to define the If condition whether the variable:IsAvailable = true or false to show the corresponding div tag?

I tried with following code, but didnt work exactly...

cshtml file

<div class="myoutercls">
                @if (Model.IsAvailable == True)
                {
                    <div class="mycls">
                    <a class="envelope" href="javascript:void(0)">
                     <span class="glyphicon glyphicon-envelope"></span>
                      <span>Envelope</span>
                  </a>
                <a class="search" href="javascript:void(0)">
                    <span class="glyphicon glyphicon-search"></span>
                    <span>Search</span>
                </a>
                <a id="save" class="fr" href="javascript:void(0)">
                    <span class="glyphicon glyphicon-print"></span>
                    <span>Print</span>
                </a>
                    </div>

                }

                @if (Model.IsAvailable == False)
                {
                    <div class="mycls">
                    <a class="envelope" href="javascript:void(0)">
                     <span class="glyphicon glyphicon-envelope"></span>
                      <span>Envelope</span>
                    </a>
                    <a class="search" href="javascript:void(0)">
                        <span class="glyphicon glyphicon-search"></span>
                        <span>Search</span>
                    </a>
                    </div>
                }
</div>

Select allOpen in new window