揭示模塊模式在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

您應該使用新的實例化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); 
});