剑道网格,数据列中的模板不起作用

时间:2017-09-08 09:49:16

标签: html5 templates mvvm data-binding kendo-ui

我已经在数据列字段中编写了模板,但它并不起作用。 我使用kendo与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错误的输出:

SyntaxError:...中的意外标识符

1 个答案:

答案 0 :(得分: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>