在HotTowel模板中使用KoGrid

Question

我正在尝试在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文件被正确引用。

谢谢你的帮助。

Answer 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

Answer 2

你可能已经弄明白了这一点，但今天也面临着同样的问题。快速浏览一下chrome检查器，我发现koGrid维度属性没有正确注册，这告诉我这是一个时间问题。我找到了一个answered question relating to the same problem here。

我确实尝试过这个解决方案，但仍有一些工作要做，才能让它更好地发挥作用。我决定放弃koGrid，因为我并不是真的想要它的所有功能。