リモートサービスによって取り込まれたselect2複数選択をノックアウトと統合する必要があります。もちろん、選択したオプションのみをバインドする必要があり、リモートから提供される利用可能なオプションはバインドしないでください。
バインドされた要素が選択である場合、それは簡単なタスク (selectedOptions バインディング) になりますが、入力ベースの場合はありません。
ノックアウトオブザーバブルを操作しようとする変更イベントを作成し、多かれ少なかれその仕事をしますが、バインディングと同じではありません。たとえば、スパの別のページでコンポーネントをインスタンス化すると、次のように扱われます。完全に新しいインスタンスであり、選択したオプションを手動で同期する必要があり、通常はノックアウトを行う作業です...
私のコード
var CodeItem = function(code) {
this.code = ko.observable(code);
};
self.values = ko.observableArray([]);
self.selectedIPCs = ko.observableArray([]);
$(".ipcMulti").select2({
placeholder: "enter ipc",
minimumInputLength: 2,
multiple: true,
id: function(obj) {
return obj;
},
ajax: {
url: "/assets/Content/suggest_ipcr.json",
dataType: 'json',
data: function (term, page) {
return {
q: term // search term
//page_limit: 10,
};
},
quietMillis:100,
results: function (data, page) {
return {results: data.spellcheck.suggestions[1].suggestion};
}
}
});
$(".ipcMulti").on("change",function(e){
underlyingArray = self.selectedIPCs();
if (e.added !== undefined) {
underlyingArray.push(new CodeItem(e.added));
} else if (e.removed !== undefined) {
var todelete = null;
ko.utils.arrayForEach(self.selectedIPCs(), function(item) {
var o1 = e.removed;
var value = item.code();
if (o1==value) {
todelete = item;
}
});
ko.utils.arrayRemoveItem(underlyingArray, todelete);
}
});