検索機能用に 2 つのビュー モデルがあります。最初のビュー モデルには、2 つのオブザーバブル、検索文字列、および検索タイプが含まれています。2 番目のビュー モデルは、検索に基づく結果です。私の Ajax 投稿では、検索タイプと検索文字列を変数として使用して、目的の結果を取得しています。しかし、次のエラーが表示されます* Uncaught Error: Unable to parse bindings. メッセージ: ReferenceError: 顧客が定義されていません。バインディング値: foreach: Customers* customers 配列が初期化されていないため、検索ボタンのクリックに基づいて 2 番目のビュー モデルのバインディングを適用します。これは、私がやろうとしていることをよりよく説明するためのフィドルです。
ここに私の完全なJavaScriptコードセグメントがあります:
var CustomerSearchViewModel = {
SearchType: ko.observable(""),
SearchString: ko.observable(""),
setSearchType: function (data, element) {
this.SearchType($(element.target).val());
}
}
var CustomerSearhResultViewModelDS = function (data) {
var self = this;
self.CustomerID = ko.observable(data.CustomerID);
alert(self.CustomerID);
self.CustomerName = ko.observable(data.CustomerName);
self.CustomerEMail = ko.observable(data.CustomerEMail);
self.CustomerTelephone = ko.observable(data.CustomerTelephone);
self.CustomerCompanyName = ko.observable(data.CustomerCompanyName);
self.CustomerCompanyAddress1 = ko.observable(data.CustomerCompanyAddress1);
self.CustomerCompanyAddress2 = ko.observable(data.CustomerCompanyAddress2);
self.CustomerCompanyZipCode = ko.observable(data.CustomerCompanyZipCode);
}
var CustomerSearhResultViewModel = function (Customer) {
var self = this;
self.Customers = ko.observableArray(Customer);
$.ajax({
url: "/Services/DataServicesECOM.svc/CustomerSearch",
data: { SearchType: CustomerSearchViewModel.SearchType(), SearchString: CustomerSearchViewModel.SearchString() },
type: "GET",
contentType: "application/json; charset=utf-8",
dataType: "JSON",
timeout: 10000,
success: function (Result) {
var MappedCustomer =
$.map(Result.d,
function (item) {
return new CustomerSearhResultViewModelDS(item);
}
);
self.Customers(MappedCustomer);
$('#ModalDetail').modal('show');
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
};
function ActivateSearch() {
var VM = new CustomerSearhResultViewModel();
ko.applyBindings(VM);
}
$(document).ready(function () {
ko.applyBindings(CustomerSearchViewModel);
});