Durandal JS 淘汰赛延期更新
Posted
技术标签:
【中文标题】Durandal JS 淘汰赛延期更新【英文标题】:Durandal JS knockout Deferred updates 【发布时间】:2017-11-03 23:38:14 【问题描述】:在淘汰库中启用延迟更新时遇到问题。我已经将 Jquery 数据表实现为一个组件,当导航到具有该组件的视图时,我可以看到按顺序调用以下方法。 Getview>激活>附加
一切正常
但是如果我按 f5 并刷新页面而不是从另一个页面导航到它,它会中断并且调用以下方法
Getview>Activate>Attach>Getview>Activate>Attach>Detach>Detach(不知道为什么它最后被调用了两次) 它坏了,根本没有表格显示在 UI 上,因为它没有根据我的判断呈现,我认为它与 durandal 转换有关,并且导航到页面和刷新页面之间存在差异吸管。
这是一个为我复制问题的最小类,注意我没有这个组件的 html 文件我想使用 getView 方法从 JQueryDT 传递一些动态 HTML
我创建了一个快速示例项目,其中复制问题所需的最低限度。 https://bitbucket.org/dchosking1988/deferred-update-example
如果你拉动它并运行它,你会看到刷新页面时“hello world”会消失,但如果你在标签之间导航,它不会消失。
我用来复制问题的一般步骤是
1) 下载示例项目
2) 添加测试组件(示例文件参见上面的 repo)
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>
【问题讨论】:
【参考方案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>
【讨论】:
【参考方案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;
);
test.js 中的 currentView 保持为空,
【讨论】:
以上是关于Durandal JS 淘汰赛延期更新的主要内容,如果未能解决你的问题,请参考以下文章