Проверьте, отображается ли DOM, связанное с текущей ViewModel?

Question

У меня есть следующий случай использования:

• Я создаю Нокаут пользовательский компонент:

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

• Внутри DetailViewModel, я выступаю некоторые, например, XHR занимает 60 секунд. В случае сбоя XHR я показываю пользователю уведомление об этом.

Теперь моя проблема заключается в том, что XHR занимает 60 секунд, и в то время как он по-прежнему «в ожидании», пользователь переходит на страницу, которая больше не содержит «деталь» компонент, а затем XHR терпит неудачу. Я не хочу показывать уведомление в этом случае просто потому, что нет необходимости показывать уведомление об отказе, если исходный компонент больше не отображается.

Есть ли способ определить внутри функции DetailViewModel, если связанный элемент DOM по-прежнему «присутствует» на странице? Прямо сейчас я использую какое-то пользовательское определенное свойство виртуальной машины («isVisible») и меняю свойство на false в DetailViewModel.prototype.dispose, но мне было интересно, есть ли более простой/чистый способ сделать это без объявления какого-либо настраиваемого свойства?

Answer 1

Вы можете использовать обработчик createViewModel в регистрации компонента, который получает компонентInfo как второй аргумент. «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"} 
});