在 HotTowel 模板中使用 KoGrid答案

【问题标题】：Using KoGrid in HotTowel template在 HotTowel 模板中使用 KoGrid
【发布时间】：2013-06-28 20:57:47
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

您是否成功地使用了带有 Durandal 模板的 koGrid？到目前为止，我们没有运气。

标签： knockout-mvc kogrid hottowel

【解决方案1】：

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

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

isAttachedToView = ko.observable(false)

并暴露它

isAttachedToView: isAttachedToView

2) 在调用 viewAttached 函数回调时将其更新为 true：

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

【讨论】：

【解决方案2】：

您可能已经解决了这个问题，但今天也遇到了同样的问题。快速浏览一下 chrome 检查器告诉我 koGrid 维度属性没有正确注册，这告诉我这是一个时间问题。我找到了answered question relating to the same problem here。

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

【讨论】：