選択したアイテムをリストから他のリストにコピーできるようにしたい2つの複数選択リストがあります。「保存」ボタンをクリックして、ajax呼び出しまたはノックアウト投稿を介してコントローラーに投稿するまで、ビューモデルのプロパティを変更したいだけです。
これを達成する方法はありますか?
フォアハンドありがとう!
jsfiddle:
'http://jsfiddle.net/aDahT/1420/
まず、他の監視可能な配列にアクセスできるようにするには、ビューモデルで変数を「this」の値に設定する必要があります。
var SProcsViewModel = function () {
var self=this;
それ以外の場合、「DB2にコピー」ボタンでは、この値はビューモデルではなくウィンドウになります。
次に、次のように、ある監視可能な配列から別の配列にコピーします。
ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function(value){
console.log(value,this,self.storedProceduresInDB2);
sprocs.push(value);
});
ノックアウトユーティリティのarrayForEachは、監視可能な配列をきれいにループし、値は配列のインデックスではなく、配列アイテムになります($ .eachなど)。
(ドキュメントでもko.utilsをさらに調べる価値があります:ko utils docs
$ .eachを使用して、次のようにループを実行できます。
$.each(self.selectedStoredProceduresInDb1(), function(value){
console.log(value,self.selectedStoredProceduresInDb1()[value]);
sprocs.push(self.selectedStoredProceduresInDb1()[value]);
});
最初に監視可能な配列にアクセスし、次にその配列のインデックスにアクセスすることを心配する必要があるため、少し複雑であることに注意してください。
リストから選択したアイテムを新しい配列sprocs
に追加するときに、それらを配列にプッシュしようとしますが、複数のアイテムがあるため、applyを使用する必要があります。
self.storedProceduresInDB2.push.apply(self.storedProceduresInDB2,sprocs);
これにより、2つのアレイがマージされます。
次に、選択したアイテムがリストに表示され、準備ができたらAJAXコードを呼び出して更新を行うことができます。
上記の変更でフィドルを作成しました。http://jsfiddle.net/jiggle/7zp5K/
更新:まだ存在しない場合にのみ、選択したリストにアイテムを追加します。
ko.utils.arrayForEach(self.selectedStoredProceduresInDb1(), function(value){
console.log(value,self.storedProceduresInDB2);
var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function(item) {
return value === item;
});
if (!match){
sprocs.push(value);
}
});
これはko.utilsarrayFirstを使用します。これは、リスト内のすべてのアイテムをループし、アイテムが見つかった場合はtrueを返します。
次に、!matchを使用して一致が未定義(見つからない)であるかどうかを確認し、定義されていない(リストにない)場合は、リストに追加します。
このコードを含めるようにフィドルを更新しました。
追加:IDだけでなくJSONオブジェクトを使用するようにコードを変更することに関するコメントのHenrickの質問に応えて....:
optionsValue: 'Id'パラメーターを<select>
(両方)から削除します。
から:
<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1,
optionsText: 'Name', optionsValue: 'Id', selectedOptions:selectedStoredProceduresInDb1"> </select>
に:
<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1,
optionsText: 'Name', selectedOptions:selectedStoredProceduresInDb1"> </select>
これにより、オブジェクトのIdプロパティではなく、選択したアイテムがオブジェクト自体にバインドされます。
次に、コードで、選択したアイテム(現在は完全なオブジェクト)のIdプロパティで一致するものを探す必要があります。
var match = ko.utils.arrayFirst(self.storedProceduresInDB2(), function(item) {
console.log('item in storedProceduresInDB2',value,item);
return value.Id === item.Id; //match to the Id property of the selected object
});
新しい作業フィドルを参照してください:http://jsfiddle.net/jiggle/7zp5K/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加