0

私はこれを2日間ほどいじっていましたが、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>

また、main.js で剣道バインディングをセットアップしました。

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

誰でも助けてください

アンドリュー。

4

2 に答える 2

0

ノックアウト剣道ライブラリはこれを簡素化します。このリンクを見てください 。また、ノックアウト外部テンプレートを使用する場合は、外部ファイルでrowTemplateを定義して動的にロードできます。durandalで使用した場合のノックアウト外部テンプレートの修正については、 この回答を参照してください

于 2013-10-03T16:03:20.237 に答える