Question

我正在努力学习Knockout JS并得出结论，我需要有一个在其他视图模型中共享的基本视图模型。此基本视图模型需要包含常见的数据和功能，并在我的jQuery Mobile应用程序中的页面中使用。例如，每个页面都有一个包含站点导航的弹出式面板。移动应用程序中的每个页面都有相同的面板，因此我不想复制每个页面的导航功能。我正在使用Knockout JS模板为每个页面构建面板。基本视图模型还包含每个页面上使用的数据。所以，我做了一些研究并找到了这个（see this answer）：

var ViewModel = function(data) {
    BaseViewModel.call(this);
};

ViewModel.prototype = new BaseViewModel();

我实现了上述方法：

myApp.BaseViewModel = function ()
{
    alert('foo');
    var self = this;
    self.CurrentPurchaseOrder = ko.observable(new PurchaseOrder());    
    self.OpenPanel = function (){..};
    self.ClosePanel = function (){..};
    self.LogOut = function (){..};
    self.GoHome = function (){..};
    self.CreateNewPurchaseOrderModal = function (){..};
    self.LoadInProgressPurchaseOrders = function (){..};
    self.LoadSubmittedPurchaseOrders = function (){..};
};

myApp.HomeViewModel = function ()
{
    var self = this;
    myApp.BaseViewModel.call(self);
    self.UserModel = ko.observable(new UserModel());    
};

myApp.PurchaseOrderListViewModel = function ()
{
    var self = this;
    myApp.BaseViewModel.call(self);
    self.PurchaseOrderList = ko.observableArray([]);
};

var baseViewModel = new myApp.BaseViewModel();
myApp.HomeViewModel.prototype = baseViewModel;
myApp.PurchaseOrderListViewModel.prototype = baseViewModel;

当我打开移动应用程序时，我会看到多条警报消息，每条消息都显示'foo'（每个视图模型扩展一个baseViewModel）。我还注意到基本视图模型中的self.CurrentPurchaseOrder每个页面都有不同的数据，表明每个页面的视图模型没有共享相同的基本视图模型。

我从每个子视图模型中删除了myApp.BaseViewModel.call（self）并重新启动了移动应用程序，只收到了1'foo'警报消息。与应用程序交互后，基本视图模型中的self.CurrentPurchaseOrder在所有页面上都具有相同的数据，这就是我所需要的。

所以，我不确定每个子视图模型中myApp.BaseViewModel.call（self）的用途。在每个子视图模型中删除它之后，所有页面共享相同的数据，并且每个页面仍然可以访问基类中的方法。 myApp.BaseViewModel.call（self）的目的是什么？

Knockout JS基础视图模型在所有视图模型中共享

0 个答案: