Knockout and observablearrays using mapping plugin

Question

the below code is working fine when i call it at the first time, however in the second call the gridviewmodel becomes messy and all data become redundant

$.ajax({
        url: 'rest service uri',
        type: 'GET',
        data: parameters,
        dataType: 'json',
        crossDomain: true,

        success: function (data) {

            function gridviewModel() {
                var self = this;
                self.items = ko.mapping.fromJS(data);
                self.columns = [
                    new column("Name", "name", "Asc"),
                    new column("URL", "name", "Asc"),
                    new column("Embargo Date", "name", "Asc"),
                    new column("Status", "name", "Asc"),
                    new column("Reviewer Name", "name", "Asc"),
                    new column("Approver Name", "name", "Asc")
                ];
            };


            ko.applyBindings(new gridviewModel());
}

I tried to clear the observable array using removeAll() but it doesn't work with me.

Any idea?

Just for any one may face this issue in the future i managed to fix it by call ko.mapping.fromJS(data, gridviewModel.items) in Knockout mapping plugin Full code is

var gridviewModel = {

        items: ko.mapping.fromJS([]),
        columns: [
                    new column("Name", "name", "Asc"),
                    new column("URL", "name", "Asc"),
                    new column("Embargo Date", "name", "Asc"),
                    new column("Status", "name", "Asc"),
                    new column("Reviewer Name", "name", "Asc"),
                    new column("Approver Name", "name", "Asc")
                ]
};

$(function () {
    ko.applyBindings(gridviewModel, document.getElementById("wip"));

});

Hope this solves others issue.

bluetoft bluetoft · Accepted Answer · 2013-09-23T00:41:45

After reading the docs on knockout mapping plugin, it appears as though your mapped data object should be your viewmode instead of a property within your viewmodel. If I were you i would modify my code to use the following:

          function gridviewModel() {
                var self = this;
                self.items = data;
                self.columns = [
                    new column("Name", "name", "Asc"),
                    new column("URL", "name", "Asc"),
                    new column("Embargo Date", "name", "Asc"),
                    new column("Status", "name", "Asc"),
                    new column("Reviewer Name", "name", "Asc"),
                    new column("Approver Name", "name", "Asc")
                ];
            };


            ko.applyBindings(ko.mapping.fromJS(new gridviewModel()));

This will map your entire object as the docs specify.

Knockout and observablearrays using mapping plugin

Any idea?

1 Answers