Question

我想在两个视图模型中分离我的DevExtreme Scheduler。一个用于实际的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>

现在，虽然我不确定我是否推荐它，但您可以使用$root.scheduler中的popup和$root.popup scheduler来访问其他虚拟机1}}。

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

第三种选择是使用＆＃34;邮箱＆＃34;模式（like this plugin by 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 个答案: