0

我已经搞砸了 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.ns = 'kendo-';
    binder.beforeBind = function (obj, view) { kendo.bind(view, obj.viewModel); };

谁能帮忙

安德鲁。

4

2 回答 2

1

由于您尝试使用 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>
于 2013-10-03T03:51:33.867 回答
0

Knockout Kendo 库简化了这一点，看看这个链接 ，如果你使用 knockout 外部模板，你可以在外部文件中定义 rowTemplate 并动态加载它。与 durandal 一起使用时， 请参阅有关修复敲除外部模板的答案

于 2013-10-03T16:03:20.237 回答