Используйте сетку Кендо с Knockout-Kendo и Knockout External-Template-Engine

Я использую сетку кендо с нокаутом, благодаря пакету нокаут-кендо.

У меня есть сетка и конфигурация сетки, как показано ниже:

<div id="gridResult" data-bind="kendoGrid: gridOptions"> </div>

шаблон:

<script id="rowTmpl" type="text/html" >
    <tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
    </tr>
</script>

код в моей модели просмотра:

// search result
this.SearchResult = ko.observableArray();
this.gridOptions = {
            data: self.SearchResult,
            pageable: { pageSize: 20 },
            useKOTemplates: true,
            rowTemplate: "rowTmpl"
}

Я заполняю источник данных, и все работает отлично.

Однако я использую Knockout.js-External-Template-Engine, который отлично работает с различными шаблонами в приложении, но не работает с шаблоном, используемым для строки сетки кендо.

Пробовал настроить двумя способами:

  1. назовите внешний шаблон в gridOptions.rowTemplate (но я понятия не имею, как я могу передать внешнему механизму шаблонов ссылку на объект данных, поэтому откажитесь от этого)

  2. пусть gridOptions.rowTemplate указывает на «псевдо-шаблон» в html-файле, а внутри него определите ссылку на внешний шаблон, передав ему $data в качестве контекста данных, как показано ниже:

<script id="rowTmpl" type="text/html" >
    <!-- ko template: {name: 'gridRow',  data: $data}-->
    <!-- /ko -->
</script>

а внешний шаблон gridRow.tmpl.html выглядит следующим образом:

<tr >
        <td data-bind="text: PermitNumber"></td>
        <td data-bind="text: WorkTypeDescription"></td>
        ....
</tr>

Однако это не работает - при проверке сетевых запросов во время загрузки страницы нет запроса на загрузку шаблона строки кендо.

Любая идея, как заставить это работать?

EDIT Я только что заметил, что когда я перемещаю шаблон строки во внешний файл, я получаю следующую ошибку javascript, даже если он работает нормально, используя rowTemplate, встроенный в страницу.

ReferenceError: gridOptions не определен


kendo-grid templates knockout.js knockout-kendo
person bzamfir    schedule 15.12.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На самом деле я понимаю, как его использовать. Решение показано ниже:

  • Настройте Infuser для использования пути к шаблону в общем месте для шаблонов и в подпапке, соответствующей имени страницы без расширения:
infuser.defaults.templateSuffix = ".tmpl.html";
infuser.defaults.templateUrlRoot = "/templates/modules";
infuser.defaults.templateUrl = infuser.defaults.templateUrlRoot + '/' +
    window.location.pathname.replace(/\.[^\.\/]+$/, "").substr(1);
  • Установите для rowTemplate в gridOptions идентификатор, который не существует на странице другого элемента.

this.gridOptions = {rowTemplate = 'myTemplate'}

  • Создайте файл в папке, где ищутся шаблоны, и назовите его как настройку имени шаблона в rowTemplate, и там просто определите фактическую разметку шаблона, не заключая ... теги. В моем случае файл шаблона /template/ модули/mypage1/myTemplate.tmpl.html

  • ОЧЕНЬ ВАЖНО!!! Убедитесь, что на странице нет элемента с идентификатором = 'myTemplate'. Если вы это сделаете, механизм шаблонов сочтет этот элемент шаблоном и попытается использовать его вместо загрузки фактического файла шаблона.

Вот и все.

Проблема, с которой я столкнулся изначально, заключалась в том, что у меня был другой элемент на странице с тем же именем, что и имя шаблона. Вот почему механизм шаблонов не подхватил фактический файл шаблона.

person bzamfir    schedule 15.12.2013