ノックアウト配列（オブザーバブル）の詳しい使用例_基礎知識

< script type="text/javascript"> var myObservableArray = ko.observableArray(); ///空の配列を初期化します
myObservableArray.push("Some Value"); ///配列 項目

2. 重要なポイント: 監視配列は、オブジェクト自体のステータスではなく、配列内のオブジェクトを追跡します。 簡単に言えば、オブジェクトを observableArray に配置しても、オブジェクト自体のプロパティの変更は監視可能になりません。もちろん、このオブジェクトのプロパティを監視可能として宣言することもできますが、このオブジェクトは依存関係監視オブジェクトになります。 observableArray は、所有するオブジェクトを監視し、これらのオブジェクトが追加または削除されたときに通知するだけです。

3. 監視配列 observableArray をプリロードします

監視配列の最初にいくつかの初期値を持たせたい場合は、それを宣言するときにコンストラクターに追加できます。初期オブジェクト。例:

コードをコピー

コードは次のとおりです:
var anotherObservableArray = ko.observableArray ([
{名前: "バングル"、タイプ: "クマ"}、 {名前: "ジョージ"、タイプ: "カバ"}、
{名前: "ジッピー"、タイプ: "不明"} > ]);

4. observableArray から情報を読み取るobservableArray は実際には監視可能な監視オブジェクトですが、その値は配列です (observableArray 他にも多くの機能があります)が追加されました（後ほど紹介します）。したがって、パラメーターなしの関数を呼び出して、通常のオブザーバブルの値を取得するのと同じように、独自の値を取得できます。 たとえば、次のように値を取得できます:

コードをコピーします


コードは次のとおりです:

alert('配列の長さは 'myObservableArray().length);alert('最初の要素は 'myObservableArray()[0]);

理論的にはこれらの配列の操作には任意のネイティブ JavaScript 配列関数を使用できますが、KO は以下の理由により、より優れた同等の機能を提供します。

A: すべてのブラウザーと互換性があります。 (例えば、IE8 以前のバージョンでは、indexOf は使用できませんが、KO 独自の IndexOf はすべてのブラウザで使用できます) B: 配列操作関数 (プッシュやスプライスなど) に関して、KO 独自のメソッドを自動的にトリガーできます。依存関係 変更を追跡してすべてのサブスクライバーに通知し、それに応じて UI インターフェイスを自動的に更新します。 C: KO の Push メソッドを呼び出すには、myObservableArray.push(...) のように記述するだけの構文が便利です。 たとえば、ネイティブ配列の myObservableArray().push(...) は非常に使いやすいです。 5.IndexOf 関数とスライスindexOf 関数は、パラメーター配列項目に等しい最初のインデックスを返します。例: myObservableArray.indexOf('Blah') は、最初のインデックスとして 0 を使用して、Blah に等しい最初の配列項目のインデックスを返します。等しいものが見つからない場合は、-1 が返されます。

スライス関数は、JavaScript ネイティブ関数スライスに関連する observableArray と同等の関数です (開始インデックスから終了インデックスまでのすべてのオブジェクトの指定されたコレクションを返します)。 myObservableArray.slice(...) の呼び出しは、JavaScript ネイティブ関数 (例: myObservableArray().slice(...)) の呼び出しと同じです。

6. observableArray の操作

observableArray は配列オブジェクトと同様の関数を表示し、サブスクライバーに通知します。

pop、push、shift、unshift、reverse、sort、splice
これらの関数はすべて、JavaScript 配列のネイティブ関数と同等です。唯一の違いは、配列の変更がサブスクライバーに通知されることです:


。
コードをコピー

コードは次のとおりです:

myObservableArray.push('Some new value');//新しい値を次の場所に追加します。配列の末尾 ItemmyObservableArray.pop(); // 配列の最後の項目を削除して返します
myObservableArray.unshift('Some new value'); // 配列の先頭に項目を追加します配列
myObservableArray.shift ();// 配列の先頭の最初の項目を削除して返します
myObservableArray.reverse();// 配列全体の順序を逆にします

myObservableArray.sort ();// 配列をソートします
デフォルトでは、文字 (文字の場合) または数値 (数値の場合) でソートされます。
並べ替え関数を渡すことで並べ替えることができます。並べ替え関数は 2 つのパラメーター (配列内で比較する必要がある項目を表す) を受け入れる必要があります。最初の項目が 2 番目の項目より小さい場合は、-1 が返されます。より大きい場合、1 を返すことは 0 を返すことと同じです。たとえば、人を姓で並べ替えるには、次のように記述できます:

コードをコピーします コードは次のとおりです:

myObservableArray.sort(
function(left, right) {
return left.lastName == right.lastName ? 0 : (left.lastName < right.lastName ? -1 : 1 );
} );

myObservableArray.splice() は、指定された開始インデックスと指定された数の配列オブジェクト要素を削除します。たとえば、myObservableArray.splice(1, 3) は、インデックス 1 から始まる 3 つの要素 (2 番目、3 番目、および 4 番目の要素) を削除し、これらの要素を配列オブジェクトとして返します。
observableArray 関数の詳細については、同等の JavaScript 配列標準関数を参照してください。
7.remove と RemoveAll

コードをコピーします コードは次のとおりです:

observableArrayいくつかの JavaScript 配列にはデフォルトはありませんが、非常に便利な関数が追加されました:
myObservableArray.remove(someItem);// someItem に等しいすべての要素を削除し、削除された要素を配列として返します
myObservableArray.remove(function (item) ) { return item.age < 18;}) ;//age 属性が 18 未満のすべての要素を削除し、削除された要素を配列として返します