監控屬性數組
如果要對一個對象檢測和響應變化,會使用監控屬性。如果要對一個序列檢測并監控變化,需要使用observableArray(監控屬性數組)。這在你顯示或編輯多個值,需要用戶界面的部分反復出現和消失的項目并且具有添加和刪除操作的情況下使用observableArray。
例如聲明并賦值:
var myObservableArray = ko.observableArray(); // Initially an empty array myObservableArray.push('Some value'); // Adds the value and notifies observers
解如何綁定observableArray到用戶界面,讓用戶可以修改它,可以參考如下例子:
視圖代碼:
<form data-bind="submit: addItem"> New item: <input data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> <button type="submit" data-bind="enable: itemToAdd().length > 0">Add</button> <p>Your items:</p> <select multiple="multiple" width="50" data-bind="options: items"> </select> </form>
視圖模型代碼:
var SimpleListModel = function(items) { this.items = ko.observableArray(items); this.itemToAdd = ko.observable(""); this.addItem = function() { if (this.itemToAdd() != "") { this.items.push(this.itemToAdd()); // Adds the item. Writing to the "items" observableArray causes any associated UI to update. this.itemToAdd(""); // Clears the text box, because it's bound to the "itemToAdd" observable } }.bind(this); // Ensure that "this" is always this view model }; ko.applyBindings(new SimpleListModel(["Alpha", "Beta", "Gamma"]));
初始化observableArray
如果你希望observableArray在程序開始的時候就具有一定的數據,可以通過如下方式進行observableArray的初始化:
// This observable array initially contains three objects var anotherObservableArray = ko.observableArray([ { name: "Bungle", type: "Bear" }, { name: "George", type: "Hippo" }, { name: "Zippy", type: "Unknown" } ]);
從observableArray讀取信息
在后臺,一個observableArray實際上是一個監控屬性,它的值是一個數組。所以,你可以通過調用獲得底層的JavaScript數組不帶參數的函數,然后,你可以閱讀數組信息。例如:
alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);
從技術上講,你可以使用任何的本地JavaScript數組函數來讀取observableArray的內容,但通常有一個更好的選擇。KO的observableArray有它自己的功能函數,而且用起來更加的方便:
-
在目標瀏覽器。(例如,本地JavaScript indexOf函數不能在IE 8工作或較早,但KO的indexOf可以兼容任何版本的瀏覽器。)
-
對于修改數組的內容,如函數push和splice,可以讓所有注冊的偵聽器通知更改,你的用戶界面會自動更新KO的依賴跟蹤機制所定義的對象。
-
語法是更方便。要調用KO的push方式,只需要寫myObservableArray.push(...)。這比調用底層Javascript寫方法myObservableArray().push(...)更加方便
索引
該indexOf函數返回等于你參數的第一個數組元素的索引。例如,myObservableArray.indexOf('Blah')將返回第一個數組條目等于從零開始的索引Blah,如果沒有匹配值被發現則返回-1
數組片段
observableArray的slice函數與本地JavaScript的slice函數等價(即,它從已有的數組中返回選定的元素)。調用myObservableArray.slice(...)與myObservableArray().slice(...)等效于。
observableArray數組操作
(移除,增加,插入,移除單一元素,反轉順序,排序,移除部分元素)
所有這些功能都等同于運行底層JavaScript數組函數:
-
push( value ) - 增加了一個新的項目,在數組的末尾。
-
pop() - 移除數組的最后一個值,并返回它。
-
unshift( value ) - 在數組開頭插入一個新項目。
-
shift() - 移除數組的第一個值并返回。
-
reverse()-反轉數組的順序,并返回observableArray。
-
sort()-排序數組內容并返回observableArray。
-
默認的排序是按字母順序,但你可以選擇傳遞一個參數來控制陣列如何進行排序。你的函數應該接受來自數組的任意兩個對象,如果第一個參數為較小返回一個負值,正值是第二較小,或為零它們視為相等。例如,排序按姓氏'人'對象的數組,你可以寫myObservableArray.sort(function (left, right) { return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1) })
-
-
splice()-刪除,并返回從一個給定的索引起始元件的給定數目。例如,myObservableArray.splice(1, 3)將刪除索引位置1(即第二,第三和第四個元素)開始三個元素,并返回它們作為一個數組。
有關這些詳細信息observableArray的函數,可以參考等價文檔標準的JavaScript數組函數。
刪除和刪除全部
observableArray 的補充方法:
-
remove( someItem )-移除等于someItem值的元素并返回它們作為一個數組。
-
remove( function (item) { return item.age < 18; } )-刪除其所有的價值age小于18的元素,將它們作為一個數組。
-
removeAll( ['Chad', 132, undefined] )-移除所有等于'Chad'或123或undefined的元素并返回它們作為一個數組。
-
removeAll() - 刪除所有值并返回它們作為一個數組。
銷毀destroyAll(注: Ruby on Rails的開發人員需要了解)
該destroy和destroyAll函數主要目的是為使用Ruby on Rails開發者更加便利:
-
destroy( someItem )-查找值等于someItem數組中的任何元素,并為特殊的屬性_destroy賦值true。
-
destroy( function (someItem) { return someItem.age < 18; } )-在數組中查找任何對象age小于18的元素,并為特殊的屬性_destroy賦值true。
-
destroyAll( ['Chad', 132, undefined] )-找到數組中所有等于'Chad'或123或undefined的元素,并為特殊的屬性_destroy賦值true。
-
destroyAll()-對數組中所有對象的特殊的屬性_destroy賦值true。
那么,這是什么_destroy東西一回事呢?Rails開發者。在Rails中的約定是,當你傳遞到一個動作或一個JSON對象,該框架可以自動將其轉換為一個ActiveRecord對象,然后將其保存到數據庫中。它知道它的對象都已經在你的數據庫,并發出正確的INSERT或UPDATE語句。告訴框架刪除一條記錄,你只是將_destroy標記設置為true。
請注意,當KO呈現一個foreach具有約束性,它會自動隱藏標記用任何元素的_destroy。所以,你可以有某種"刪除"按鈕調用該destroy(someItem)方法在數組上,這將立即引起指定的項目,從UI消失。后來,當您提交Rails的JSON對象,該項目也將被從數據庫中刪除。
延緩和/或抑制更改通知
通常情況下,observableArray只要它的改變會立即通知其用戶。但如果observableArray反復更改高昂的更新數據傳輸頻率,你可以通過限制或拖延更改通知,獲得更好的性能。這是通過使用rateLimit進行限制:
// Ensure it notifies about changes no more than once per 50-millisecond period myViewModel.myObservableArray.extend({ rateLimit: 50 });
文章列表