jquery - Infragistics 使用 Hot Towel/Durandal SPA 应用程序点燃 UI 网格

Question

有人有将 Infragistics Ingite UI 控件集成到 Hot Towel/Durandal SPA 应用程序中的经验吗？

我已将此 ig 示例集成到基本的 Hot Towel 应用程序中:

http://www.infragistics.com/products/jquery/sample/grid/grid-knockoutjs-integration

它适用于简单的绑定(bind)，例如:

查看:

<table id="grid" data-bind="igGrid: {
    dataSource: gridData, autoGenerateColumns: false,
    columns: [
        { headerText: 'Product Name', key: 'Name', dataType: 'string' }
    ]}">
</table>

虚拟机:

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate,
        title: 'Details View',
        gridData: adventureWorks // Points to ig's JSON sample data
    };

    return vm;

    //#region Internal Methods
    function activate() {
        return true;
    }
    //#endregion
});

这工作正常并渲染网格。但是，一旦我将任何功能添加到绑定(bind)中，我就会收到错误，例如:

<table id="Table1" data-bind="igGrid: {
    dataSource: gridData, autoGenerateColumns: false,
    features: [
        { name: 'Sorting', type: 'local' }
    ],
    columns: [
        { headerText: 'Product Name', key: 'Name', dataType: 'string' }
    ]}">
</table>

错误是“[“无法调用未定义的方法'_injectGrid'”，“views/details”，Object]”。

我正在使用 jQuery.Migrate 库(因为 ig 仍然引用 1.7 而 Durandal 想要 1.9)，并用它来加载依赖的 ig 脚本:

$.ig.loader({
    scriptPath: "../App/Infragistics/js/",
    cssPath: "../../Content/",
    resources: "igGrid.*,extensions/infragistics.datasource.knockoutjs.js,extensions/infragistics.ui.grid.knockout-extensions.js"
});

顺便说一句，我尝试使用“传统”jQuery(即非 KO)API 来创建网格，但遇到了更多问题!

非常感谢任何帮助。

Answer 1

我无法真正为您提供 100% 合适的解决方案，但我可以告诉您为什么会得到这个 - 问题不在于 knockout (或者更确切地说不是因为它) - View 与模型的绑定(bind)在将实际 View 标记附加到文档之前发生。我相信它是作为片段加载的，因此 igGrid 尝试使用 jQuery 选择它并将功能小部件附加到它 - 这显然无法获取尚不存在的项目.

我不熟悉 Hot Towel ，我不知道如何让它先附加标记，然后进行 knockout 绑定(bind)，所以我只是通过预先手动将片段附加到主体上来帮助解决这个问题ViewModelBinder.js:

bind: function(obj, view) {
    doBind(obj, view, function () {
        if ((view.getAttribute("data-view") == "views/details") && ($(view).parent().length == 0)) {
            $("#content").prepend(view);
        }
        ko.applyBindings(obj, view);
        if (obj.setView) {
            obj.setView(view);
        }
    });
}

它几乎就是这样工作的(移动实际的 Durandal 包装器会使其稍微抽动一下)。现在我知道这不是正确的方法，但它可以让您知道出了什么问题。或者您可以添加

 ko.applyBindings(settings.model, newChild);

在 entrance.js startTransition 函数中，删除上面函数中的额外前缀和绑定(bind)。仍然不是很好的过渡，但更好了。

附注还注意到，当您直接进入详细信息 View 时，您无需等待加载程序，请注意 Infragistics Loader是异步的并且有一个回调函数，这就是您实际等待加载器完成的方式:)