Revealing module pattern set new instance of a model in Knockout

Question

I have MVVM and models like;

var my = my || {};

$(function () {

 my.ListModel = (function () {
    var 
        data = ko.observableArray([]),
        totalCount = ko.observable(),
        page = ko.observable(),
        limit = ko.observable(),
        goTo = function (d) {
            $.getJSON("/prices/GetByFilterViaJSON", { limit: limit, page: d }, function (list) {
                data(list.Data);
                page(list.Page);
            });
        },
        loadData = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                success: function (list) {
                    data(list.Data);
                    page(list.Page);
                    totalCount(list.TotalCount);
                },
                data: { limit: limit },
                async: false
            });
        };
    return {
        Data: data,
        TotalCount: totalCount,
        Page: page,
        Limit: limit,
        GoTo: goTo,
        LoadData: loadData
    };
})();

my.PriceListViewModel = (function () {

    var
        grid1 = ko.observable(),
        grid2 = ko.observable(),
        loadGrid = function () {
            grid1(my.ListModdel);
            grid1().Limit(5);
            grid1().LoadData('/prices/GetByFilterViaJSON');

            grid2(my.ListModel);
            grid2().Limit(3);
            grid2().LoadData('/prices/GetByUserViaJSON');
        };
    return {
        Grid1: grid1,
        Grid2: grid2,
        LoadGrid: loadGrid
    };
})();

my.PriceListViewModel.LoadGrid();
ko.applyBindings(my.PriceListViewModel);
});

and I have a problem with them. As you can see, when LoadData (in PriceListViewModel) is triggered, Grid1 has same values with Grid2. What is the problem, how can I solve this?

Answer 1

You should use new to instantiate the ListModels:

var my = my || {};

$(function () {

 my.ListModel = function () {
    var 
        data = ko.observableArray([]),
        totalCount = ko.observable(),
        page = ko.observable(),
        limit = ko.observable(),
        goTo = function (d) {
            $.getJSON("/prices/GetByFilterViaJSON", { limit: limit, page: d }, function (list) {
                data(list.Data);
                page(list.Page);
            });
        },
        loadData = function (url) {
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'json',
                success: function (list) {
                    data(list.Data);
                    page(list.Page);
                    totalCount(list.TotalCount);
                },
                data: { limit: limit },
                async: false
            });

    return {
        Data: data,
        TotalCount: totalCount,
        Page: page,
        Limit: limit,
        LoadData: loadData
    };
};

my.PriceListViewModel = (function () {

    var
        grid1 = ko.observable(),
        grid2 = ko.observable(),
        loadGrid = function () {
            grid1(new my.ListModel());
            grid1().Limit(5);
            grid1().LoadData('/prices/GetByFilterViaJSON');

            grid2(new my.ListModel());
            grid2().Limit(3);
            grid2().LoadData('/prices/GetByUserViaJSON');
        };
    return {
        Grid1: grid1,
        Grid2: grid2,
        LoadGrid: loadGrid
    };
})();

my.PriceListViewModel.LoadGrid();
ko.applyBindings(my.PriceListViewModel);
});