0

こんにちは、knockout.js を使用する次のコードがあります。

var allJobberDetailsArray = [];
getAllJobberDetailsArray();
function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                allJobberDetailsArray = data;
            }
        });
    })
}

// ViewModel
function JobberCheckBoxListUserControlViewModel() {
    var self = this;
    self.allJobberDetailsArray = ko.observableArray(allJobberDetailsArray);
}
ko.applyBindings(new JobberCheckBoxListUserControlViewModel());

allJobberDetailsArray への変更 UI を自動的に更新したい 配列項目が追加され更新または削除されたと言います UI にそれを反映させたいです。

どうすればそれを達成できますか?

編集

var allJobberDetailsArray = ko.observableArray();

getAllJobberDetailsArray();

function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                allJobberDetailsArray.removeAll();
                allJobberDetailsArray.push(data);
            },
        });
    })
}

// ViewModel
function JobberCheckBoxListUserControlViewModel() {
    var self = this;
    self.allJobberDetailsArray = allJobberDetailsArray;// allJobberDetailsArray is now observable but any change to this doesn't reflect in the UI
}
var viewModel = new JobberCheckBoxListUserControlViewModel();
ko.applyBindings(viewModel);

上記のコードでは、配列自体を監視可能にし、配列に変更があった場合に UI を自動更新しようとしましたが、どうすればそれを達成できますか?

4

1 に答える 1

0

まず、更新している配列は監視可能な配列ではありません。次に、成功コールバックは実際に配列を上書きします。最後に、viewModelへの参照を保持しないため、監視可能な配列を適切に更新できません。ObservableArrayは、実際の配列をラップして、それらを監視可能にします。すべての追加の削除などは、サブスクライバーに通知できるようにobservableArrayを通過する必要があります。

代わりにこれを試してください。

// ViewModel
function JobberCheckBoxListUserControlViewModel(initialArray) {
    var self = this;
    self.allJobberDetailsArray = ko.observableArray(initialArray || []);
}

var viewModel = new JobberCheckBoxListUserControlViewModel();

function getAllJobberDetailsArray() {
    $(function() {
        $.ajax({
            url: 'http://example.com',
            type: 'GET',
            data: {
                request: "yes",
                getAllJobberDetailsArray: "yes"
            },
            success: function(data) {
                viewModel.allJobberDetailsArray(data);
            }
        });
    })
}

ko.applyBindings(viewModel);

getAllJobberDetailsArrayまた、メソッドをviewModel内に配置して、グローバル名前空間を汚染せず、カプセル化を維持するようにリファクタリングすることをお勧めします。

お役に立てれば。

于 2012-06-25T21:07:30.073 に答える