Edit in JSFiddle

var demo2Model =function(){
  var self =this;
    self.Citys=ko.observable();
    self.AddCity=function(){
      self.Citys({
          province: "安徽",
          city: ['合肥','巢湖','宣城','蚌埠']
      });
    };
    self.DelCity=function(){
        self.Citys(undefined);
    };
};

ko.applyBindings({
    city: "London",
    coords: {
        latitude:  51.5001524,
        longitude: -0.1262362
    }
},document.getElementById("Demo1"));

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

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

    <li  class="Point">
    1、<b  class="PointTitle">使用<span class="KeyWord">with</span>绑定</b><br />
        <ul class="PointDesc">
            <li>with绑定可以更改其下面的绑定对象上下文</li>
        </ul>
        <div  class="PointDemo" id="Demo1">
            <h1 data-bind="text: city"> </h1>
            <p data-bind="with: coords">
                Latitude: <span data-bind="text: latitude"> </span>,
                Longitude: <span data-bind="text: longitude"> </span>
            </p>

        </div>
        <div class="PSFrame">
       注意在with之后，内部的绑定上下文切换到了coords属性内部，可以直接使用laitude等属性进行绑定。
        </div>
        <hr />
    </li>
    <li  class="Point">
    2、<b  class="PointTitle">继续了解<span class="KeyWord">with</span>绑定</b><br />
        <ul class="PointDesc">
            <li>with绑定的对象，如果是Null或者undefined，则with内部的绑定不会被展示出来</li>
        </ul>
        <div  class="PointDemo" id="Demo2">
            <div data-bind="with: Citys">
                <span data-bind="text:province"></span>
                <ol data-bind="foreach: city">
                    <li data-bind="text: $data"></li>
                </ol>
                <button data-bind="click: $parent.DelCity">删除城市</button>
            </div>
            <button data-bind="click: AddCity">添加城市</button>
        </div>
        <div class="PSFrame">
       注意在with的对象为null或者undefined的时候，内部元素是如何被移除的。
        </div>
        <hr />
    </li>
    <li  class="Point">
    3、<b  class="PointTitle">继续了解<span class="KeyWord">with</span>绑定</b><br />
        <ul class="PointDesc">
            <li>with绑定的对象，如果是Null或者undefined，则with内部的绑定不会被展示出来</li>
        </ul>
        <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;
}