0

我正在尝试在 HotTowel SPA 模板中的 HTML 视图中使用 KoGrid。我创建了一个简单的视图：

<section>
    <h2 class="page-title" data-bind="text: title"></h2>

    <div class="gridStyle" data-bind="koGrid: gridOptions"></div>
</section>

并在JS中添加模型数据：

define(['services/logger'], function (logger) {
var vm = {
    activate: activate,
    title: 'My Grid'
};

return vm;

//#region Internal Methods
function activate() {
    var self = this;
    this.myData = ko.observableArray([{ name: "Moroni", age: 50 },
                                      { name: "Tiancum", age: 43 },
                                      { name: "Jacob", age: 27 },
                                      { name: "Nephi", age: 29 },
                                      { name: "Enos", age: 34 }]);
    this.gridOptions = { data: self.myData };
    return true;
}
//#endregion

});

网格在页面上，但样式似乎完全错误地呈现宽度和位置，因此列彼此重叠，并且大多数数据明显不正确。KoGrid.css 文件被正确引用。

谢谢你的帮助。

4

2 回答 2

1

问题的核心是“当 KOGrid 在 Durandal/HotTowel 中进行绑定时，KOGrid 元素还不是 DOM 的一部分”。您需要确保 KOGrid 在附加视图之前不会进行绑定。这可以通过以下方式实现：

1) 向视图模型添加一个新的可观察对象，以保存视图是否已被 durandal 附加的布尔值：

isAttachedToView = ko.observable(false)

并暴露它

isAttachedToView: isAttachedToView

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

function viewAttached() {
    isAttachedToView(true);
    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-28T12:14:29.983 回答
0

您可能已经弄清楚了这一点，但今天也面临同样的问题。快速浏览一下 chrome 检查器告诉我 koGrid 维度属性没有正确注册，这告诉我这是一个时间问题。我在这里找到了与同一问题相关的已回答问题。

我确实尝试了这个解决方案，但仍然需要做一些工作才能让它很好地发挥作用。我决定让 koGrid 错过，因为我真的不想要它的所有功能z :)

于 2013-06-04T06:29:56.860 回答