Infragistics Ignite UI grid с приложением Hot Towel/Durandal SPA

Есть ли у кого-нибудь опыт интеграции элементов управления 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>

VM:

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' неопределенного", "представления/детали", 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"
});

Между прочим, я попытался использовать «традиционный» API jQuery (т.е. не-KO) для создания сетки, и у меня появилось еще больше проблем!

Любая помощь очень ценится.


jquery knockout.js durandal infragistics hottowel
person Chris Cairns    schedule 12.04.2013    source источник
comment
Образец приложения доступен для загрузки здесь: monexa.co.uk/downloads/HotTowelIgniteTest.zip   -  person Chris Cairns    schedule 12.04.2013

Ответы (2)


arrow_upward
4
arrow_downward

Я не могу предоставить вам 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 удалите лишнее добавление и привязку сверху. Все еще не очень хороший переход, но уже лучше.

P.S. Также заметил, что когда вы переходите непосредственно к просмотру сведений, вы не ждете загрузчика, обратите внимание на Infragistics Loader является асинхронным и имеет функцию обратного вызова, именно так вы фактически ожидаете завершения работы загрузчика :)

person Damyan Petev    schedule 15.04.2013
comment
Спасибо, оба эти подхода, похоже, работают. В целом я предпочитаю переход, так как в Durandal легко создать свой собственный переход и подключить его (хотя я также могу подключить собственный ViewModelBinder). Вероятно ли, что будет много изменений в расширениях интеграции KO для следующего основного выпуска, и есть ли у вас график выпуска? - person Chris Cairns; 17.04.2013

arrow_upward
0
arrow_downward

Я не уверен, но поскольку запрос загрузчика в асинхронном режиме, файлы сетки инфраструктуры могут быть еще не загружены. Чтобы убедиться, что это проблема, попробуйте добавить скрипты без загрузчика, например:

<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 для привязки к нокаутной сетке. попробуй может сработает.

Еще одна идея, если вы хотите сохранить загрузчик, состоит в том, чтобы разрешить отложенный объект в обратном вызове загрузчика, когда все инфра-файлы загружены, и вернуть этот отложенный объект из метода активации.

person gpanagakis    schedule 14.04.2013
comment
Я думал, что это может быть так, но у меня есть загрузчик, работающий при запуске приложения (shell.js), и я не перехожу к представлению с сеткой, пока не увижу, что все ресурсы ig загружены. Я также могу уйти от представления, а затем вернуться к нему, и я получаю ту же проблему. - person Chris Cairns; 14.04.2013