Knockout create array in viewmodel

Question

another knockout question.

I've a page where serversided paging is desirable. I wanna achieve this using knockout.

I Create a viewmodel using the mapping pluging and added lots of functionality.

        var jsonModel = '@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(this.Model, new Newtonsoft.Json.Converters.IsoDateTimeConverter()))';
        myViewModel = ko.mapping.fromJSON(jsonModel, {}, new ViewModel());
        ko.applyBindings(myViewModel);

I've implemented a computed observable at first. But this gave an error because the 'requestData' isn't initialized. therefore the updated variant with an 'if (typeof self.requestData != 'undefined')'

function ViewModel() {
var self = this;
//---- Return PageNumbers
self.Paging = ko.computed(function () {
    if (typeof self.requestData != 'undefined') {
        if (self.requestData.settings.pageNumber() <= 5) {
            return ko.utils.range(1, 11);
        }
        if (self.requestData.settings.pageNumber() + 5 > self.requestData.settings.nbrOfPages()) {
            return ko.utils.range(self.requestData.settings.nbrOfPages() - 11, self.requestData.settings.nbrOfPages());
        }
        return ko.utils.range(self.requestData.settings.pageNumber() - 5, self.requestData.settings.pageNumber() + 5);
    };
    return ko.utils.range(1, 11);
});

the array should be updated when i make a call to the ajaxrequest:

self.changePage = function(pageNumber) {
    self.Paging = ko.utils.range(pageNumber -1 > 0 ?)
    myViewModel.requestData.settings.pageNumber = pageNumber;
    $.ajax({
        type: "post",
        contentType: "application/json",
        url: "../Refund/FilterPageSortingChange",
        data: ko.toJSON(self.requestData),
        error: function (xhr, status, error) {
            baseShowError("Server Error", "Error changing page");
        },
        success: function (response) {
            var receivedResponse = JSON.parse(response);
            if (receivedResponse.Success) {
                ko.mapping.fromJS(receivedResponse.Result, {}, self);
            } else {
                baseShowError("Page not found", receivedResponse.message);
            }
        }
    });
};

What should i do for updating the paging array on receiving new data?

Kinds regards

UPDATE: Apart from my code, whats the best/easiest option to create an observable array thats depandant of the pageNumber?

Greg Ennis · Accepted Answer · 2014-01-08 03:06:31Z

1

Your pageNumber is an observable, but when you assign it like this:

myViewModel.requestData.settings.pageNumber = pageNumber;

you have erased the observable and replace it with a simple value. You should assign it like this:

myViewModel.requestData.settings.pageNumber(pageNumber);

answered Jan 8, 2014 at 3:06

Greg Ennis

15.5k2 gold badges73 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luuk Krijnen Over a year ago

good point (sorry for the beginners mistake) but nevertheless the self.Paging is a computed dependent on 2 observables. But after the update of these observables the self.Paging isn't triggerd for updating.

Greg Ennis Over a year ago

The rest of what you have looks OK but probably something I overlooked. Can you post a jsfiddle and I will help get it working

Collectives™ on Stack Overflow

Knockout create array in viewmodel

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related