2013-12-15 153 views
0

由於淘汰賽kendo包,我使用kendo網格與淘汰賽。使用kendo網格與淘汰賽kendo和淘汰賽外部模板引擎

我有網格,網格的配置定義如下:

<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,它可以在整個應用程序中使用各種模板,但不適用於用於kendo網格行的模板。

我試圖建立它在兩路:

  1. 名gridOptions.rowTemplate外部模板(但我不知道我怎麼能傳遞到外部的模板引擎引用的數據對象,所以給死了這條)

  2. 讓gridOptions.rowTemplate點在HTML文件中的「僞模板」,並在其內部定義參考外部模板,傳遞$數據如下數據上下文:

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

但是,它不工作 - 檢查頁面加載過程中網絡請求時,沒有加載劍道要求行模板。

任何想法如何使它工作?


編輯 我只注意到,當我移動的行模板外部文件,我得到下面的JavaScript錯誤,即使它的工作原理確定在頁面上,使用內嵌rowTemplate。

的ReferenceError:gridOptions沒有定義

回答

0

其實我弄清楚如何使用它。 該解決方案如下所示:

  • 配置浸泡器採用下模板的公共位置模板路徑和子文件夾匹配的頁面名稱不帶擴展名:
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/modules/mypage1/myTemplate.tmpl.html

  • 非常重要!!! 確保您的頁面上沒有ID ='myTemplate'的任何元素。 如果你這樣做,模板引擎會認爲元素的模板,並會嘗試使用它,而不是加載實際的模板文件

就是這樣。

我最初面臨的問題是我有頁面上的另一個元素與模板名稱相同的名稱。這就是爲什麼模板引擎沒有拿起實際的模板文件。