新規または削除されたエントリに対してのみ、観測可能な配列を購読する。
2023-11-12 10:25:39
質問
はい、私は観測可能な配列を購読することができます。
vm.myArray = ko.observableArray();
vm.myArray.subscribe(function(newVal){...});
問題は
newVal
が配列全体であることです。どうにかして、デルタ部分のみを取得することはできないでしょうか?例えば
が追加されました。
または
を削除
要素を削除しましたか?
どのように解決するのですか?
KnockoutJS 3.0以降では、KnockoutJSに含まれる arrayChangeサブスクリプションオプション を ko.observableArray に追加しました。
var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]);
myArray.subscribe(function(changes) {
// For this example, we'll just print out the change info
console.log(changes);
}, null, "arrayChange");
myArray.push("newitem!");
上記のコールバックでは、changesの引数は以下のようなchangeオブジェクトの配列になります。
[
{
index: 3,
status: 'added',
value: 'newitem!'
}
]
あなたの具体的な問題に対して 新しいアイテムや削除されたアイテムの通知を受けたい場合 . Knockout 3を使って実装すると、以下のようになります。
myArray.subscribe(function(changes) {
changes.forEach(function(change) {
if (change.status === 'added' || change.status === 'deleted') {
console.log("Added or removed! The added/removed element is:", change.value);
}
});
}, null, "arrayChange");
関連
-
[解決済み] JavaScriptで配列の先頭に新しい配列要素を追加するにはどうすればよいですか?
-
[解決済み] 配列の反復処理に "for...in "を使用するのは、なぜ良くないのでしょうか?
-
[解決済み] オブジェクトの配列から、プロパティの値を配列として取り出す。
-
[解決済み] スクロールした後に要素が表示されているかどうかを確認するには?
-
[解決済み] 新しい配列を作成せずに、既存のJavaScript配列を別の配列で拡張する方法
-
[解決済み] 整数の配列を正しくソートする方法
-
[解決済み] オブジェクトの配列を日付のプロパティでソートする方法は?
-
[解決済み] Javascriptによるタッチスクリーンデバイスの検出
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] JavaScriptのtoString()関数をオーバーライドして、デバッグ用に意味のある出力を提供することは可能でしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Google maps API V3 - 同一地点に複数のマーカーを設置する。
-
[解決済み] 文字列のn番目の出現箇所を取得するには?
-
[解決済み] Chart.jsを使ってドーナツチャートの中にテキストを追加するには?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] Chromeの拡張機能開発にWebStormを使用するにはどうすればよいですか?
-
[解決済み] JavaScript のオブジェクトの配列を比較し、最小値/最大値を取得する
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?