家の住所を選択するために使用される一連のカスケード ドロップダウン リストがあります。アドレスを次の順序で分割します。
- 通りの名前 (例: 10th、11th、Main)
- 番地のサフィックス (St、Ave など)
- 通りの方向
- 番地（番地）
ノックアウトを使用して、REST クエリを介してデータベースからプルされるドロップダウンの値を生成しています。単一のエッジケースを除いて、これはうまく機能しています。
最初に、アドレスについて少し説明させてください (アドレスがこのようにばらばらになっている場合)。必ず通りの名前があり、通りの番号があります。接尾辞と方向は常に使用されるわけではありません。したがって、100 Savanna South (Savanna South は通りの名前)、または 101 Main St となる可能性があります。これらのシナリオは、接尾辞と方向が変わると仮定して機能します。
問題は、10 番目から 11 番目に切り替えるときです。どちらも「Street」のサフィックスしかなく、どちらも「West」の 1 つの方向しかありません。変更を行っても、サフィックスと方向は変更されず、次のデータ セットを取得するための適切なサブスクライブがトリガーされません。したがって、10 番目から 11 番目に変更しても、番地は更新されません。
function AddViewModel() {
/* Address */
self.StreetName = ko.observable('');
self.StreetNames = ko.observableArray([""]);
self.StreetName.subscribe(function (val) {
if ((val !== undefined && val !== null && val !== '') && val !== viewModel.StreetType()) {
getStreetTypes(val);
}
});
self.StreetType = ko.observable('');
self.StreetTypes = ko.observableArray([]);
self.StreetType.subscribe(function (val) {
if (val !== undefined && val !== null && val !== '') {
alert("I changed to " + val);
getStreetDirections(self.StreetName, val);
}
});
self.StreetDirection = ko.observable('');
self.StreetDirections = ko.observableArray([]);
self.StreetDirection.subscribe(function (val) {
if (val !== undefined && val !== null && val !== '') {
getStreetNumbers(self.StreetName, self.StreetType, val);
}
});
self.StreetNumber = ko.observable('');
self.StreetNumbers = ko.observableArray([]);
self.StreetNumber.subscribe(function (val, e) {
if (val !== undefined && val !== null && val !== '') {
$.get('/api/gis/addressview/getaddress',
{ streetName: $('#StreetName').val(), streetType: $('#StreetType').val(), streetDirection: $('#StreetDirection').val(), streetNumber: val },
function (result) {
loadAddresses(result);
}, 'json');
}
});
}
// Get the street types
function getStreetTypes(streetName) {
$.get('/api/gis/cascadingaddress/getstreettypes', { streetName: streetName }, function (result) {
viewModel.StreetTypes(result);
// If there is only one street type, load it.
if (result.length === 1) {
if (result[0] !== "" && result[0] !== " ") {
viewModel.StreetType(result[0]);
viewModel.StreetType.notifySubscribers();
} else {
getStreetDirections(streetName, result[0]);
viewModel.StreetType.notifySubscribers();
}
}
}, 'json');
}
function getStreetDirections(streetName, streetType) {
$.get('/api/gis/cascadingaddress/getstreetdirections', { streetName: streetName, streetType: streetType }, function (result) {
viewModel.StreetDirections(result);
// If there is only one street direction, load it
if (result.length === 1) {
if (result[0] !== "" && result[0] !== " ") {
viewModel.StreetDirection(result[0]);
viewModel.StreetDirection.valueHasMutated();
} else {
getStreetNumbers(streetName, streetType, result[0]);
viewModel.StreetDirection.valueHasMutated();
}
}
}, 'json');
}
function getStreetNumbers(streetName, streetType, streetDirection) {
$.get('/api/gis/cascadingaddress/getstreetnumbers', { streetName: streetName, streetType: streetType, streetDirection: streetDirection }, function (result) {
viewModel.StreetNumbers(result);
}, 'json');
}
フィールドでjQuery$.trigger('change')を実行することから、上記の追加で表示されるものまで、いくつかのことを試してきました.valueHasMutated()。通りの名前が変更されたかどうかを確認するための精巧なコードを書くことができましたが、サフィックスと方向は変更されていませんでした。その後、番地を再ロードしましたが、可能であればサブスクライブ フレームワーク内にとどめようとしています。
関数をトリガーするか、.subscribe()別のアプローチを取る方法を正しい方向に向けることができますか?
注: REST エンドポイントがプライベート ネットワークにあり、公開されていないことを考えると、JSFiddle を実行することはできません。そうでなければ、私はそれを提供します。