Edit in JSFiddle

var SimpleListModel = function (items) {
    var self = this;
    self.items = ko.observableArray(items);
    self.itemToAdd = ko.observable("");
    //判断数组最后一个元素是否observable
    self.lastIsObservable = ko.computed(function () {
        var lastIndex = self.items().length - 1;
        var item = this.items()[lastIndex];
        return ko.isObservable(item);
    }, self);

    self.addItem = function () {
        if (self.itemToAdd() != "") {
            self.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update.
            self.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    } // .bind(self);  // Ensure that "this" is always this view model
    self.addObservableItem = function () {
        if (self.itemToAdd() != "") {
            self.items.push(ko.observable(this.itemToAdd())); // 添加监控属性到监控数组中.
            self.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable
        }
    } // .bind(self);  // Ensure that "this" is always this view model

    self.itemsLength = ko.computed(function () {
        return self.items().length;
    });
    self.modify = function () {
        var lastIndex = self.items().length - 1;
        self.items()[lastIndex] = self.items()[lastIndex] + ' modified';
    };
    self.modifyObservable = function () {
        var lastIndex = self.items().length - 1;
        self.items()[lastIndex](self.items()[lastIndex]() + ' modified');
    };
    self.items.subscribe(function (newVal) {
        alert(newVal.length);
    });
};
var viewModel1 = new SimpleListModel(["Alpha", "Beta", "Gamma"]);
ko.applyBindings(viewModel1, document.getElementById("Demo1"));

<h1>演示 KnockOut Observable Arrays 功能</h1>
<hr />
<ul>
 <li  class="Point">
    1、<b  class="PointTitle">理解<span class="KeyWord">"Observable Array"</span>的用法</b><br />
        <ul class="PointDesc">
            <li>Observable Array具有js内置Array的所有特性(push,pop等)</li>
            <li>它可以跟踪array对象个数的变化，动态更新UI</li>
            <li>可以<span class="KeyWord">手动订阅数组变化事件</span>进行处理</li>
        </ul>
        <div  class="PointDemo" id="Demo1">
                New item:
                <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
                <input type="button" data-bind="enable: itemToAdd().length > 0,click:addItem" value="添加普通元素"></input>
                <input type="button" data-bind="enable: itemToAdd().length > 0,click:addObservableItem" value="添加监控元素"></input>
                <p>Your items:</p>
                <select multiple="multiple" style=" width：60px; height:100px;" data-bind="options: items"> </select>
                <span>列表中元素个数：<span data-bind="text:itemsLength"></span></span>
          
                <input type="button" data-bind="disable:lastIsObservable,click:modify" value="修改普通数组元素"></input>
                <input type="button" data-bind="enable:lastIsObservable,click:modifyObservable" value="修改监控数组元素"></input>
        </div>
        <!--下面写一些特殊的提示信息-->
        <div class="PSFrame">
        
        <ul>
            <li>1、获取监控数组数据长度，要使用array().length，因为实际上监控数组也是一个对象，他内部保存了数组数据</li>
            <li>2、监控数组本身只负责监控<span class="KeyWord">数组元素个数的变化</span>，某个元素内容本身的变化由元素自己负责监控</li>
            <li>3、本例中，直接添加普通元素，点击修改普通元素的值后，界面不会同步更新。但是如果添加的是监控元素，则修改监控元素的值后，UI会同步变化</li>
            <li>4、还需要注意的是，如果数组的个数发送变化，所有数组元素都会更新，所以当再次添加元素的时候，上一次修改的数据会重新绑定</li>
        </ul>
        </div>
        <hr />
    </li>
</ul>
<hr />

/*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;
}