检查是否显示与当前视图模型关联的 DOM

Check if DOM associated with current ViewModel is displayed?

本文关键字：模型 关联 DOM 视图 是否 显示 检查      更新时间：2023-09-26

我有以下用例：

  • 我正在创建挖空自定义组件：

    ko.components.register("detail", {
    template: {require: "text!components/detail.html"},
    viewModel: DetailViewModel
});

  • 在DetailViewModel内部，我正在执行一些需要 60 秒才能完成的 XHR。如果 XHR 失败，我会向用户显示有关它的通知。

现在我的问题是 XHR 需要 60 秒，当它仍然处于"挂起"状态时，用户导航到不再包含"详细信息"组件的页面，然后 XHR 失败。在这种情况下，我不想显示任何通知，仅仅是因为如果不再显示原始组件，则显示失败通知是没有用的。

有没有办法在DetailViewModel函数内部确定关联的 DOM 元素是否仍然"存在于"页面上？现在我正在使用 VM 的一些自定义属性（"isVisible"）并将属性更改为 DetailViewModel.prototype.dispose 中的 false ，但我想知道是否有一种更简单/更干净的方法可以在不声明任何自定义属性的情况下做到这一点？

您可以在组件注册中使用"createViewModel"处理程序，该处理程序将 componentInfo 作为第二个参数接收。"componentInfo.element"是一个组件的DOMElement。因此，您可以访问它并检查其可见性。

ko.components.register('detail', {
    viewModel: {
        createViewModel: function(params, componentInfo) {
            var domElement = componentInfo.element;
            // You can pass domElement as a parameter for the DetailViewModel
            return new DetailViewModel(params);
        }
    },
    template: {require: "text!components/detail.html"}
});
相关文章：