9

我使用 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

谢谢你的帮助。

4

3 回答 3

4

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

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

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

viewAttached 函数发生在组合绑定之后，触发器将导致koGrid更新其宽度/高度可观察对象。koGrid监听这个事件。

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

于 2013-04-02T07:21:18.257 回答
2

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

1) 向视图模型添加一个新的 observable，以保存一个布尔值，用于判断视图是否已被 durandal 附加：

isAttachedToView = ko.observable(false)

并暴露它

isAttachedToView: isAttachedToView

2) 在调用 viewAttached 函数回调时更新它为真：

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
于 2013-06-28T11:55:13.270 回答
0

此更新适用于 Durandal 2.x

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

为了让 kogrid 正常工作，只需要执行这行代码作为 Durandal 框架初始化的一部分：

composition.addBindingHandler('koGrid');

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

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

于 2014-07-11T11:54:54.590 回答