Asp.net mvc 4 如何使用Kendi UI'；带Durandal的s网格

我已经搞了两天了，我只是不知道如何让KendoUI的网格与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>

有人能帮忙吗

---

Andrew.

由于您试图使用kendo mvvm绑定剑道网格（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>

击倒剑道库简化了这一点，看看这个，如果你使用击倒外部模板，你也可以在外部文件中定义行模板，并动态加载它。请参阅关于与durandal一起使用时击倒外部模板修复的回答

谢谢，但是更改函数需要定义pgtemplate变量，这需要一个指向网格的指针，对吗？啊，不。您可以使用MVVM进行配置，请参阅我已编辑了答案。

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