Edit in JSFiddle

var demo2ViewModel =function(){
    var self =this;
    self.displayable=ko.observable(false);
    setInterval(function(){self.displayable(!self.displayable())},1000);
};

ko.applyBindings({
    displayMessage: ko.observable(false)
}, document.getElementById("Demo1"));

ko.applyBindings(new demo2ViewModel() ,document.getElementById("Demo2"));

<h1>演示 KnockOut if绑定  功能</h1>
<hr />
<ul>

    <li  class="Point">
    1、<b  class="PointTitle">使用<span class="KeyWord">if</span>绑定</b><br />
        <ul class="PointDesc">
            <li>if绑定和visible绑定有着相似之处，但是也有不同：
            <ul>
                <li>1、visible绑定用于一个容器元素，是通过控制css的display来显示或者隐藏元素。元素本身的data-bind等都还是会执行的</li>
                <li>2、if绑定用于一个容器元素，是通过真正的从DOM里移除或者加入元素来实现的。只有当表达式为true时，元素才会加入DOM</li>
            </ul>
            </li>
        </ul>
        <div  class="PointDemo" id="Demo1">
            <label><input type="checkbox" data-bind="checked: displayMessage" /> 勾中显示</label>

            <div data-bind="if: displayMessage">这里有一个信息，勾中则显示</div>
        </div>
        <div class="PSFrame">
        需要注意的是，if绑定如果为false,容器元素自身仍然存在，只是里面的子元素全部不在DOM中。<br>
        另外，if可以绑定到任何一个表达式，如果绑定了observable的变量，则会根据变量值的变换动态更新
        </div>
        <hr />
    </li><li  class="Point">
    2、<b  class="PointTitle"><span class="KeyWord">不依赖容器</span>使用if绑定</b><br />
        <ul class="PointDesc">
            <li>如果不需要容器元素作为if绑定对象，可以使用注释来创建ko虚拟容器元素实现if绑定</li>
        </ul>
        <div  class="PointDemo" id="Demo2">
            <ul>
                <li>使用注释创建虚拟标签实现绑定</li>
                <!-- ko if: displayable -->
                <li>这段话每隔一秒会显示一次</li>
                <!-- /ko -->
            </ul>
        </div>
        <div class="PSFrame">
       注意DOM元素的变化，if内部的标签确实会从DOM中移除，而不是仅仅隐藏。所以使用if绑定会频繁修改DOM结构
        </div>
        <hr />
    </li>

</ul>

/*Demo�ļ���ʽ*/
body
{
    background-color: #e3e5d4;
}
/*  ֪ʶ��    */
.Point
{
    margin: 20px,0,0,0;
}
/*  ֪ʶ�����    */
.PointTitle
{
    color:#0d8d0d;
}
/*  �ؼ���    */
.KeyWord
{
    color:Red;
}
/*  ֪ʶ������    */
.PointDesc
{
    font-family: Arial;
    font-size: 15px;
    color:#09acb8;
}
.PointDesc li
{
    margin: 10px,0,0,0;
}
/*  ֪ʶ��Demo���    */
.PointDemo
{
    border-style:double; 
    border-color:#dcd559;
    min-height:100px;
    font-family: Corbel;
    font-size: 20px;
    color: #00174f;
}
/*  ��Ҫ������ʾ����Ϣ���    */
.PSFrame
{
    border-style: dashed; 
    border-color:#78e6ef;
    font-family: Corbel;
    font-size: 20px;
    font-style:italic;
    color: #b86c00;
}
/*  ������ʾ    */
.error {
    color:Red;
    
}
/*  **********************************************************    */
/*��Ҫǿ������ʽ*/
.Notice
{
    font-weight: bold;
    font-family:Bodoni MT Black;
    color: #cd0707;
}

/*  **********************************************************    */
/*�������ʽ*/
input[type="text"]
{
    min-width:250px;
}
select
{
    min-width:400px;
}