将koGrid与Durandal/HotTowel模板集成 [英] Integrate the koGrid with the Durandal/HotTowel template

问题描述

我使用Durandal模板开发asp.net解决方案.

I work on an asp.net solution with the Durandal template.

我尝试使用koGrid( https://github.com/Knockout-Contrib/KoGrid )与淘汰赛兼容.在由Durandal管理的测试页中插入此网格时，它不起作用:该网格似乎存在但未正确显示.

I try to use the koGrid (https://github.com/Knockout-Contrib/KoGrid) which is compatible with knockout. When inserting this grid in a test page managed by Durandal, it doesn't work: the grid seems to be there but not correctly displayed.

我们注意到，如果我们调整窗口大小，则网格将正确调整.

We noticed that if we resize the window, then the grid adjust correctly.

有人能成功将koGrid集成到Durandal/HotTowel模板中吗?

重现该问题的步骤:

• 创建一个新的ASP.NET MVC项目并选择Durandal模板
• 在项目中添加koGrid(在Nuget中可用)
• 将此网格放在视图上并添加虚拟数据
• 运行并显示包含网格的视图

这里是一个包含一个ASP.NET MVC项目的zip文件，用于重现该问题: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

Here is a zip containing a little ASP.NET MVC project to reproduce the problem: https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

感谢您的帮助.

推荐答案

仅应将其视为解决方法！适用于具有 koGrid-2.1.1.js 的 Durandal.Core 1.2 .如果有任何更改可以解决此问题，我将更新该帖子.

This should be considered a workaround only! Applies to Durandal.Core 1.2 with koGrid-2.1.1.js. If either changes to fix this behavior, I will update the post.

在视图模型中添加一个viewAttached()函数(并确保将其添加到对象文字中)，如下所示:

Add a viewAttached() function in your viewmodel (and be sure to add it to your object literal) like so:

function viewAttached() {
    logger.log('Home View Attached', null, 'home', true);
    $(window).trigger('resize');
    return true;
}

viewAttached函数在合成绑定之后发生，并且触发器将导致 koGrid 更新其宽度/高度可观察值. koGrid 监听此事件.

The viewAttached function occurs after the composition binding, and the trigger will cause the koGrid to update its width/height observables. koGrid listens for this event.

注意:与HotTowel模板仍有CSS冲突，您需要解决这些冲突. SPA在body标签上使用18px的字体大小.此外，面板复选框也应该被隐藏，这可能与Bootstrap CSS冲突.

NOTE: There are still CSS conflicts with the HotTowel template that you will need to resolve. The SPA uses a font-size of 18px on the body tag. Also the panel checkboxes should be hidden, a possible conflict with the Bootstrap CSS.

这篇关于将koGrid与Durandal/HotTowel模板集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！