Durandal JS 淘汰赛延迟更新

Question

我在 Knockout 库中启用延迟更新时遇到问题。我已经将 Jquery datatables 作为组件实现，当导航到具有此组件的视图时，我可以看到按顺序调用以下方法。获取视图>激活>附加

一切正常

但是如果我按 f5 并刷新页面而不是从另一个页面导航到该页面，它会中断并调用以下方法

Getview>Activate>Attach>Getview>Activate>Attach>Detach>Detach（不知道为什么最后调用了两次）它中断了， table 根本没有显示在 UI 上，因为它没有根据我所知道的进行渲染，我认为它与 durandal 转换有关并且导航到 a 之间存在差异页面和刷新页面有点抓不住吸管。

这是一个最小的 class，它为我复制了这个问题，注意我没有这个组件的 HTML 文件我想使用 getView 方法传递一些动态 HTML 来自 JQueryDT

我创建了一个快速示例项目，其中包含复制问题所需的最低限度。 https://bitbucket.org/dchosking1988/deferred-update-example

如果你拉动它并运行它你会看到 "hello world" 会在你刷新页面时消失，但如果你在选项卡之间导航它不会消失。

我用来重现问题的一般步骤是

1) 下载示例项目

2) 添加测试组件（示例文件见上面的 repo）

3) 启用延迟更新

4) 禁用视图缓存

4) 尝试编写组件的新实例

编辑以提供更多信息

*这不是JQuery数据table的问题，是用下面的

复制的

所以你不必下载 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

中创建 class 的实例

 <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>

Answer 1

发生这种情况是因为它调用代码两次，第二次调用 currentView 在 test.js 中保持为空，我评论了您设置 currentView 和代码工作的部分。

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>

Answer 2

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;
});

currentView 在 test.js、

中保持空白

Durandal JS 淘汰赛延迟更新

Durandal JS knockout Deferred updates

javascript

knockout.js

durandal

durandal-2.0