2

次のノックアウト ビューモデルがあります。

function DepartmentsViewModel() {
    var self = this;

    self.currentComplaint = ko.observable('');
    self.departments = ko.observableArray([]);
    self.selectedDepartment = ko.observable('').extend({
        required: true
    });

}

次に、部門にデータを入力selectedDepartmentし、一連のリモート呼び出しでコントローラーに値を割り当てます (idユーザーがいる現在のページに基づいて変数に割り当てる数値です)。

$(function() {
    var self = new DepartmentsViewModel();

    self.currentComplaint(id);

    $.ajax({
        url: '@Url.Action("GetDepartments")',
        success: function (data) {
            self.departments(data);
        }
    });

    $.ajax({
        url: '@Url.Action("GetDetails")',
        data: { id: id },
        success: function (data) {
            self.selectedDepartment(data.DepartmentId);
        }
    });

    ko.applyBindings(self);

});

これは、次のように HTML に取り込まれます。

<select class="complaint-select" 
        data-bind="options: departments, 
                   optionsText: function(item) { 
                       return item.DepartmentCode + ' - ' + item.DepartmentName 
                   }, 
                   optionsValue: 'DepartmentId',
                   value: selectedDepartment, 
                   optionsCaption: 'Choose..'">
</select>

ページを更新しても設定されないことselectedDepartmentがあります。その結果、ドロップダウンに値が設定されておらず、ドロップダウンからオプションを選択するように指示されます。理由について何か考えはありますか？私はAJAXリクエストconsole.log(self.selectedDepartment());のcompleteアクションを実行しましたが、設定されている場合もあれば、未定義の場合もあります。

4

2 に答える 2

2

個別のajax呼び出しを行う代わりに、これらのajax呼び出しをチェーンして、任意のIDのdepartmantArrayに常に有効なdeparmantListが存在することを確認する必要があります。ajax呼び出しの結果はランダムに発生したため、どちらが最初に発生したかを確認することはできません。

var departmantLoadProcess =  $.ajax({
        url: '@Url.Action("GetDepartments")'      
});

departmantLoadProcess.done(function(data){

    self.departments(data);

    var detailLoadProcess = $.ajax({
        url: '@Url.Action("GetDetails")',
        data: { id: id },
        success: function (data) {         
        }
    });

    detailLoadProcess.done(function(data){
       self.selectedDepartment(data.DepartmentId);
    });

});

詳細については、Jqueryの遅延オブジェクトを調べてください

編集：

Ryanが述べたように、serilazing ajaxリクエストは、数百万のヒットを取得した場合に過負荷を引き起こします:)そして、結果が相互に依存しない場合は、それらを待つ必要はありません。さらに最適化できます。

// If both ajax request success

$.when( $.ajax({url: '@Url.Action("GetDepartments")'}),
        $.ajax({url: '@Url.Action("GetDetails")' , data : {id:id}}) ).done(function(deparmantsData,detailsData) {

   self.departments(deparmantsData);
   self.selectedDepartment(detailsData.DepartmentId);

});
于 2012-08-22T13:37:33.930 に答える
0

Knockout は、現在のオプションに基づいて有効な選択を行ったことを強制しようとします。選択した部門に対する AJAX リクエストが、部門のリストの前に返されることがあるようです。その場合、選択した部門は実際には部門のリストにありません。

いくつかのオプション:

  • 必要なすべてのデータを返す単一のリクエストを作成する方法を見つける

  • 部門がまだ入力されていない場合は、オプションにダミーのエントリを追加します。何かのようなもの：

    success: function (data) {
    if (!self.departments().length) {
        self.departments.push(data);
    }
    self.selectedDepartment(data.DepartmentId);
}

その後、部門が入ってきたら、このダミー エントリを上書きするだけです。

于 2012-08-22T12:38:53.443 に答える