javascript - 揭示模块模式在 Knockout 中设置模型的新实例

Question

我有 MVVM 和类似的模型；

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);
});

我对他们有意见。如您所见，当触发 LoadData(在 PriceListViewModel 中)时，Grid1 与 Grid2 具有相同的值。问题是什么，我该如何解决？

Answer 1

您应该使用 new 来实例化 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);
});