3

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

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

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

它适用于简单的绑定，例如：

看法：

<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
});

这工作正常并呈现网格。但是，只要将任何功能添加到绑定中，就会出现错误，例如：

<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'”，“视图/详细信息”，对象]”。

我正在使用 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 来创建网格，但我遇到了更多问题！

非常感谢任何帮助。

4

2 回答 2

4

我不能真正为您提供 100% 合适的解决方案，但我可以告诉您为什么会得到这个 - 问题不在于淘汰赛（或者不是因为它） - 视图与模型的绑定发生在实际视图标记附加到文档。我相信它是作为片段加载的，因此igGrid尝试选择它jQuery并将功能小部件附加到它 - 这显然无法获取尚不存在的项目。

我不熟悉 Hot Towel，我不知道如何让它先附加标记，然后再进行 Knockout 绑定，所以我只是通过手动将片段附加到正文中来帮助它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函数中并从上面的函数中删除额外的前置和绑定。仍然不是很好的过渡，但更好。

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

于 2013-04-15T15:07:50.650 回答
0

我不确定，但由于加载程序的异步请求，基础网格文件可能尚未加载。要查看这是否是问题，请尝试在没有加载程序的情况下添加脚本，例如：

<link href="~/Content/IG/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"type="text/css" />
<link href="~/Content/IG/css/structure/infragistics.css" rel="stylesheet" type="text/css" 
<script src="~/Scripts/IG/js/infragistics.js" type="text/javascript"></script>

您还需要敲除网格绑定 javascript 文件。试一试它可能会奏效。

如果要保留加载器，另一个想法是在加载所有基础文件时在加载器的回调中解析一个延迟对象，并从激活方法返回该延迟对象。

于 2013-04-14T11:23:09.823 回答