将koGrid与Durandal/HotTowel模板集成

Question

我用Durandal模板开发了一个asp.net解决方案。

我尝试使用与敲除兼容的koGrid (https://github.com/Knockout-Contrib/KoGrid)。在Durandal管理的测试页面中插入此网格时，它不起作用:网格似乎在那里，但没有正确显示。

我们注意到，如果我们调整窗口的大小，网格就会正确调整。

是否有人已经成功地将此koGrid集成到Durandal/HotTowel模板中？

重现问题的步骤：

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

下面是一个包含一个小型ASP.NET MVC项目的zip，用于再现问题：https://www.dropbox.com/s/15rphyhkqp1h8py/KOGrid-HotTowelTemplate.zip

谢谢你的帮助。

Answer 1

这应该被认为是唯一的解决办法！用koGrid-2.1.1.js.应用于Durandal.Core 1.2如果任何一种更改都是为了修复此行为，我将更新post。

在视图模型中添加一个viewAttached()函数(并确保将它添加到对象文本中)如下：

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

viewAttached函数发生在组合绑定之后，触发器将导致koGrid更新其宽度/高度可观测值。koGrid侦听此事件。

注意:仍然存在与需要解决的HotTowel模板的CSS冲突。SPA在主体标签上使用字体大小为18 SPA的字体。此外，面板复选框应被隐藏，这可能与引导CSS冲突。

Answer 2

前面的解决方案将确保网格显示，然而，排序不工作，至少对我。正如mikekidder在上面评论的那样，问题的核心是“当KOGrid在Durandal/HotTowel中完成它的绑定时，KOGrid元素还不是DOM的一部分”。您需要确保KOGrid在附加视图之前不会执行其绑定。实现这一目标的办法如下：

1)在视图模型中添加一个新的可观察值，以保存视图是否已附加的布尔值：

isAttachedToView = ko.observable(false)

并揭露它

isAttachedToView: isAttachedToView

2)当调用viewAttached函数回调时，Up日期为真：

function viewAttached() {
    isAttachedToView(true);
    logger.log('viewAttached');
    $(window).trigger('resize');
    return true;
}

3)用ko语句包围HTML，以确保在附加视图之前不对HTML的位进行计算(即，kogrid不执行其绑定)：

<!-- ko if: isAttachedToView() -->
    <div data-bind="koGrid: { data: ...

<!-- /ko -->

4)在失活视图上将isAttachedToView重置为false

function deactivate() {
    isAttachedToView(false);
}

并揭露这一点：

deactivate: deactivate

Answer 3

此更新适用于Durandal2.x

从Durandal2.0开始，有一种方法可以指定绑定，这些绑定应该推迟到组合完成。

要使kogrid正确工作，所需要的只是执行这一行代码，作为Durandal框架初始化的一部分：

composition.addBindingHandler('koGrid');

本例中的composition变量是对Durandal组合模块的引用。

有关更多信息，请参见文档：http://durandaljs.com/documentation/Interacting-with-the-DOM.html