Durandal JS нокаут Отложенные обновления

У меня возникает проблема при включении отложенных обновлений в библиотеке нокаута. Я реализовал JQuery datatables в качестве компонента, при навигации к представлению, в котором есть этот компонент, я могу видеть, что следующие методы вызывают по порядку. GetView > Включить > Attach

все работает как ожидалось

Но если я нажму f5 и обновить страницу, а не перейду к ней с другой страницы, она сломается и будут вызываться следующие методы

Getview > Активировать > Прикрепить > Getview > Активировать > Прикрепить > Отсоединить > Отсоединить (не уверен, почему его вызывается дважды в конце) и он ломается, ни одна таблица не показывает в пользовательском интерфейсе вообще, поскольку она не отображает из того, что я могу сказать, я думаю, что это имеет какое-то отношение к переменам в дурандале, и существует разница между переходом на страницу и освещением страницы, которая захватывает соломинки.

Это минимальный класс, который реплицирует проблему для меня, обратите внимание, что у меня нет файла HTML для этого компонента. Я хочу использовать метод getView для передачи некоторого динамического HTML из JQueryDT

Я создал быстрый образец проекта с минимальным минимумом, необходимым для репликации проблемы. https://bitbucket.org/dchosking1988/deferred-update-example

Если вы потянете это и запустите его, вы увидите, что "hello world" исчезнет, ​​когда вы обновите страницу, но это не будет, если вы перемещаетесь между вкладками.

общие шаги, которые я использовал для репликации проблемы:

1) скачать образец проекта

2) добавить тестовый компонент (см. репо выше для файла примера)

3) включить отложенные обновления

4) отключить кеширование просмотра

4) попробуйте создать новый экземпляр компонента

Редактирование, чтобы предоставить дополнительную информацию

* Это не проблема JQuery Datatable, она реплицируется со следующими

Таким образом, вам не нужно загружать gitRepo, это код, который я могу реплицировать проблему в примере проекта, следуя приведенным выше шагам.

define([],
function () {
    var test = function () {
        var self = this;

        var defaultViewHtml = '<div> <h1>Hello World</h1></div>';
        var currentView = null;

        self.getView = function () {
            console.log('GetView');
            if (!currentView) {
                currentView = $(defaultViewHtml)[0];
            }
            return currentView;
        };

        self.activate = function (activateOptions) {
            console.log('Activate');
        };

        self.attached = function (view, parent, settings) {
            console.log('Attatched');
        };

        self.detached = function (view, parent) {
            console.log('Detatched');
        };
    };

    return test;
});

Затем добавьте этот HTML-код в index.html, также не забудьте создать экземпляр класса в index.js

 <div class="whiteRow">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div data-bind="compose: { model: test }"></div>
            </div>
        </div>
    </div>
</div>

Ответы

self.getView = function () {
               console.log('GetView');
               //if (!currentView) {
               //    currentView = $(defaultViewHtml)[0];
               //}
               return currentView;
               };

<div class="whiteRow">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div data-bind="compose: { model: test }"></div>
            </div>
        </div>
    </div>
</div>

define([],
function () {
var test = function () {
    var self = this;

    var defaultViewHtml = '<div> <h1>Hello World</h1></div>';
    var currentView = null;

    self.getView = function () {
           console.log('GetView');
           return currentView;
           };

    self.activate = function (activateOptions) {
        console.log('Activate');
    };

    self.attached = function (view, parent, settings) {
        console.log('Attatched');
    };

    self.detached = function (view, parent) {
        console.log('Detatched');
    };
  };

  return test;
});