如何在另一个视图模型内的视图模型中调用函数？

Question

我想将我的DevExtreme Scheduler分为2个视图模型。 一种是用于实际的Scheduler，另一种是用于显示Popup并处理按钮。 但是我什么都有，但是我不能在Popup视图模型中调用该函数。

$(document).ready(function () {

    var model = new viewModel();
    ko.applyBindings(model, document.getElementById("BookingScheduler"));

    var popup = new viewPopup();
    ko.applyBindings(popup, document.getElementById("BookingPopup"));

});

在我的调度程序中，我有一个单击处理程序，在其中，我想调用弹出视图模型中的loadData函数。

function viewPopup() {
   function loadData(data) {
   }
}

这就是我试图将其称为popup.loadData(data); 和viewPopup().loadData(data); 他们都不起作用。 我得到popup.loadData（）不是一个函数 。 我该如何实现？

Answer 1

通常，您创建一个主视图模型并使用with绑定来绑定子视图模型：

var App = function() {
  this.scheduler = new viewModel();
  this.popup = new viewPopup();
}

$(document).ready(function () {
  ko.applyBindings(new App());
});

使用HTML：

<body>
  <div data-bind="with: scheduler" id="BookingScheduler"></div>
  <div data-bind="with: popup" id="BookingPopup"></div>
</body>

现在，尽管我不确定我是否会推荐这样做，但是您可以使用popup $root.popup和scheduler $root.scheduler访问另一个$root.popup 。

更好的选择可能是在实例化时将引用传递给popup视图模型。

第三种选择是使用“邮箱”模式（如R. Niemeyer的此插件）。

Answer 2

在我的调度程序中，我有一个单击处理程序，在其中，我想调用弹出视图模型中的loadData函数。

然后，调度程序视图模型需要对弹出视图模型的引用。 交换您声明它们的顺序，并在中传递引用

var popup = new viewPopup();
ko.applyBindings(popup, document.getElementById("BookingPopup"));
var model = new viewModel(popup);
ko.applyBindings(model, document.getElementById("BookingScheduler"));

如何在另一个视图模型内的视图模型中调用函数？

问题描述

2 个解决方案

解决方案1
1 2017-06-13 09:12:45

解决方案2
0 2017-06-13 08:00:53

如何在另一个视图模型内的视图模型中调用函数？

问题描述

2 个解决方案

解决方案1 1 2017-06-13 09:12:45

解决方案2 0 2017-06-13 08:00:53

解决方案1
1 2017-06-13 09:12:45

解决方案2
0 2017-06-13 08:00:53