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）向viewmodel添加一个新的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

Answer 2

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

我确实试过这个解决方案，但仍然有一些工作要做，以使它很好地发挥球。我已经决定给koGrid一个小姐，因为我真的不想要它的功能无论如何:) :)

在HotTowel模板中使用KoGrid

2 个答案: