0

我正在使用带有淘汰赛的剑道网格，这要归功于淘汰赛剑道包。

我有网格和网格的配置定义如下：

<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>

但是，它不起作用 - 在页面加载期间检查网络请求时，没有加载 kendo 行模板的请求。

知道如何使它工作吗？

编辑 我刚刚注意到，当我将行模板移动到外部文件时，我收到以下 javascript 错误，即使在页面中使用 rowTemplate inline 可以正常工作。

ReferenceError：未定义gridOptions

4

1 回答 1

0

其实我知道如何使用它。解决方案如下图所示：

  • 将 infuser 配置为在模板的公共位置下使用模板路径，并在匹配页面名称的子文件夹中使用不带扩展名的子文件夹：
infuser.defaults.templateSuffix = ".tmpl.html";
infuser.defaults.templateUrlRoot = "/templates/modules";
infuser.defaults.templateUrl = infuser.defaults.templateUrlRoot + '/' +
    window.location.pathname.replace(/\.[^\.\/]+$/, "").substr(1);
  • 将 gridOptions 中的 rowTemplate 设置为另一个元素的页面中不存在的 ID

this.gridOptions = { rowTemplate = 'myTemplate' }

  • 在查找模板的文件夹中创建一个文件，并将其命名为 rowTemplate 中的模板名称设置，并在那里定义实际的模板标记，而不包含 ... 标签在我的情况下，模板文件是 /template/模块/mypage1/myTemplate.tmpl.html

  • 很重要 ！！！ 确保页面上没有 ID ='myTemplate' 的任何元素。如果你这样做了，模板引擎会将该元素视为模板并尝试使用它，而不是加载实际的模板文件

而已。

我最初面临的问题是我在页面上有另一个与模板名称同名的元素。这就是模板引擎没有选择实际模板文件的原因。

于 2013-12-15T20:02:45.887 回答