Question

我一直在搞这个2天，我只是不明白如何使KendoUI的Grid与Durandal一起工作，即视图中的内容和视图模型中的内容。我需要通过Web API从服务中获取数据，但我甚至没有将其渲染。

有人可以帮忙吗？

到目前为止我做了什么：

视图模型：

    function viewAttached(view) {

        var vw = $(view),
             grid = $('#pgGrid', vw);

        var sampledata = [
        { "ID": 1, "firstName": 'Andrew', "lastName": 'Test' },
        { "ID": 2, "firstName": 'Aidi', "lastName": 'Test' },
        { "ID": 3, "firstName": 'Aiko', "lastName": 'Test' }
        ];

        var pgtemplate = kendo.template($('#pgtemplate', vw).html());

        var dataSource = new kendo.data.DataSource({
            data: sampledata,
            change: function () { // subscribe to the CHANGE event of the data source
                $("#pgGrid tbody").html(kendo.render(pgtemplate, this.view())); // populate the table
            }
        });

        dataSource.read();

        grid.kendoGrid({
            columns: [
              { title: 'ID', field: 'id', width: 40, template: pgtemplate },
              { title: 'First name', field: 'firstName', width: 40, template: pgtemplate },
              { title: 'Last name', field: 'lastName', width: 40, template: pgtemplate }
            ],
            dataSource: dataSource,
            editable: false,
            pageable: {
                refresh: true,
                previousNext: false,
                numeric: false
            },
            scrollable: {
                virtual: true
            },
            sortable: false
        });
    }

观点：

                <div id="pgGrid"
                    data-kendo-role="grid"
                    data-kendo-bind="source: gridSource"
                    data-kendo-editable="true"
                    data-kendo-columns='["ID",
                                    { "field": "firstName", "width": "150px" }, 
                                    { "field": "lastName", "width": "100px" }]'
                    data-kendo-pageable="true">
                </div>

                <script id="pgtemplate" type="text/x-kendo-template">
                    <tr>
                        <td>#= id #</td>
                        <td>#= firstName #</td>
                        <td>#= lastName #</td>
                    </tr>
                </script>

我还在main.js中设置了kendo绑定：

    kendo.ns = 'kendo-';
    binder.beforeBind = function (obj, view) { kendo.bind(view, obj.viewModel); };

任何人都可以请帮助

安德鲁。

Answer 1

由于您尝试使用kendo mvvm来绑定kendo网格（kendo.ns ='kendo-'），因此您不必使用jquery来选择网格并对其进行渲染（grid.kendoGrid（{）。你的视图模型只需要调用一个属性gridDatasource，

   define(function (require) {

      return {
       gridDatasource:function(){
          var sampledata = [
            { "ID": 1, "firstName": 'Andrew', "lastName": 'Test' },
            { "ID": 2, "firstName": 'Aidi', "lastName": 'Test' },
            { "ID": 3, "firstName": 'Aiko', "lastName": 'Test' }
            ];

            var dataSource = new kendo.data.DataSource({
                data: sampledata,
                change: function () { // subscribe to the CHANGE event of the data source
                    $("#pgGrid tbody").html(kendo.render(pgtemplate, this.view())); // populate the table
                }
            });
        return dataSource;
       }
     }
   });

只需删除viewAttached函数，您不必再次在javascript中定义网格，因为您已在HTML中定义了它。你可以像这样给出行模板，

 <div id="pgGrid"
                    data-kendo-role="grid"
                    data-kendo-bind="source: gridSource"
                    data-kendo-editable="true"
                    data-kendo-columns='["ID",
                                    { "field": "firstName", "width": "150px" }, 
                                    { "field": "lastName", "width": "100px" }]'
                    data-kendo-pageable="true"
                    data-kendo-rowTemplate="pgtemplate"
>
                </div>

Answer 2

Knockout Kendo库简化了这一点，看看这个link，如果使用knockout外部模板，你可以在外部文件中定义rowTemplate并动态加载它。与durandal

一起使用时，请参阅this关于敲除外部模板的修复的答案

如何在Durandal中使用Kendo UI Grid的示例

2 个答案: