debugging - 在 Durandal 中，您如何在调试或开发工具控制台中获取活动 VM 的句柄？

Question

第一次使用 Duranrdal 构建应用程序，我希望能够使用 chrome 开发人员工具控制台在加载时检查各个页面上的视图模型的值。

问题是我看不到 window.Durandal 或 window.MainApp。我可以在 main.js 定义函数中做到这一点：

window.myApp = app;

但这似乎是一个 hack，它并没有真正让我掌握当前的视图模型。我想过只是在路由器中做类似的代码，但这也很丑陋。

我的应用程序和当前虚拟机是否可以以更清晰的方式访问？也许加载模块时的require.js将该引用放在dom上的某个地方？我想如果我能得到路由器的句柄，我会没事的。

我也有兴趣获得支持模式对话框的 VM 的句柄。不知道你是否可以从路由器或其他部分得到它。

Answer 1

在 chrome 开发人员工具中，您可以在视图模型中放置断点并逐步执行代码。此外，durandal 将您的视图模型对象记录到 console.log 中，这样您就可以看到它们绑定到视图的状态。

这是另一种方法，它只是利用 requirejs 的机制以编程方式获取对 viewmodel 对象的引用。只需在您的 chrome 控制台中输入类似这样的内容：

require(['durandal/pluggins/router','yourViewModel'], function (router, vm) {
    // here you can do whatever you want now to your router or vm.
    vm.someproperty('changed');
    router.activateRoute('page2');
});

您甚至可以通过在控制台中执行此操作来对要更改的对象进行全局引用：

require(['durandal/pluggins/router','yourViewModel'], function (router, vm) {
    window.TestVM = vm;
    window.router = router;
});

然后你可以像这样访问这些对象：

TestVM.someproperty('changed');
router.activateRoute('page2');

Answer 2

在控制台中只需输入：

viewmodel = require('viewmodels/myviewmodel')