Question

我使用Durandal模板处理asp.net解决方案。

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

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

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

重现问题的步骤：

感谢您的帮助。

Answer 1

这应该只是一种解决方法！适用于 koGrid-2.1.1.js 的 Durandal.Core 1.2 。如果要么更改以修复此行为，我将更新帖子。

在viewmodel中添加一个viewAttached（）函数（并确保将其添加到对象文字中），如下所示：

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

viewAttached函数在合成绑定后发生，触发器将使 koGrid 更新其宽度/高度observable。 koGrid 会收听此事件。

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

Answer 2

之前的解决方案将确保网格显示，但是，排序对我来说至少不起作用。正如mikekidder在上面评论的问题的核心是“当KOGrid在Durandal / HotTowel中进行绑定时，KOGrid元素还不是DOM的一部分”。您需要确保KOGrid在附加视图之后才进行绑定。这可以通过以下方式实现：

1）向viewmodel添加一个新的observable，以保存视图是否已被durandal附加的布尔值：

isAttachedToView = ko.observable(false)

并揭露它

isAttachedToView: isAttachedToView

2）调用viewAttached函数回调时，将日期设置为true：

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

3）使用ko if语句包围HTML，以确保不会评估HTML的位（即kogrid不进行绑定），直到附加视图为止：

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

<!-- /ko -->

4）在停用视图

时将isAttachedToView重置为false

function deactivate() {
    isAttachedToView(false);
}

揭露这个：

deactivate: deactivate

Answer 3

此更新适用于Durandal 2.x

从Durandal 2.0开始，有一种方法可以指定在组合完成之前应该延迟的绑定。

为了让kogrid正常工作，所需的只是在Durandal框架初始化中执行这行代码：

composition.addBindingHandler('koGrid');

此示例中的composition变量是对Durandal合成模块的引用。