kendo網格，數據列中的模板不起作用

Question

我已經在數據列字段中編寫了模板，但它不起作用。 我用mvvm使用劍道。 這是我的html代碼：

<div id="dr" data-role="grid" 
      data-editable="false" 
      data-selectable="true" 
      data-filterable="true" 
      data-columnMenu="true" 
      data-groupable="true" 
      data-pageable="true" 
      data-reorderable="true" 
      data-resizable="true" 
      data-selectable="true" 
      data-sortable="true" 
      data-scrollable="false" 
      data-height="550" 
      data-columns="[ 
       {field: 'id', title:'ID', hidden: true, width: 240}, 
       {field: 'date',title: 'Data', width: 240, template:'#:kendo.toString(kendo.parseDate(date, 'yyyy-MM-dd'), 'dd/MM/yyyy')#'}, 
       {field: 'name', title: 'name', width: 240}, 
       {field: 'address',title: 'address', width: 240} 
      ]" 
      data-bind="source: Gridsource, 
       events:{ 
        change: Gridchange 
       }"> 

這是JS錯誤的輸出：

語法錯誤：在...

Answer 1

意外的標識我想你定義模板的方法是有效的，並拋出錯誤同時解析它。

試試這個

<div class="grid-favorite" data-role="grid" 
        data-no-records="{template: '<h3>No data available.</h3>'}" 
        data-selectable="false" 
        data-scrollable="true" 
        data-pageable="{pageSize: 8}" 
        data-filterable= "true" 
        data-sortable="true" 
        data-bind="source: dsCurrentLoans, events: { dataBound: onDataBound, sort: sortLoans }" 
        data-columns="[ 
         { template: kendo.template($('[name=fav-unfav-col-template]').html()), 
          headerTemplate: kendo.template($('[name=header-template]').html()), 
          attributes: {'class': 'text-center'}, 
          headerAttributes: { style: 'text-align: center'}, 
          filterable: false, 
          width: '50px' 
         }, 
         { 
          field: 'dateClosed', 
          title: 'Close Date', 
          template: kendo.template($('[name=date-field]').html()) 
         }, 
         { 
          field: 'loanAmount', 
          title: 'Loan Amount', 
          format:'{0:c2}', 
          type: 'number', 
          attributes: {'class': 'text-right link', 'data-bind':'events: { click: onRowClick }'}, 
          width: '140px' 
         } 
        ]"> 
      </div> 

而且這樣定義柱模板，改變它按照需要

<script id="date-field" name="date-field" type="text/x-kendo-template"> 
<div class="item-description" data-bind="text: targetCloseDate" data-format="MMM dd, yyyy"></div> 
</script>