如何在我的 Durandal SPA 项目中使用 DurandalGrid 小部件？

Question

我想用 durandalJS 和 Asp.net Web Api 框架创建一个 SPA。我有一个视图模型和一个视图，负责在网格中显示人员列表以及分页和自定义行。
为此，我使用了 durandal 网格 (https://github.com/tyrsius/durandal-grid) 小部件，但这不是 mork。 ;(

这是我的模块（viewmodel）：

define(["durandal/app"], function (app){
var initialData = [
    { firstname: "James", lastname: "Smith", age: 35 },
    { firstname: "John", lastname: "Johnson", age: 89 },
    { firstname: "Robert", lastname: "Williams", age: 15 },
    { firstname: "Michael", lastname: "Brown", age: 10 },
    { firstname: "William", lastname: "Jones", age: 30 },
    { firstname: "David", lastname: "Miller", age: 394 },
    { firstname: "Richard", lastname: "Davis", age: 420}
];

var observableData = ko.observableArray(initialData);

function removeRow(el) {
// some code
}

return {
    removeRow : removeRow

    //Grid config options
    gridConfig: {
         data: observableData,
         pageSize: 5,
         columns: [ 
            { header: 'First Name', property: 'firstName' },    
            { header: 'Last Name', property: 'lastname' },
            { header: 'Age', property: 'age' },
            { header: '', property: '', canSort: false }
        ]}
};

})

这是我的观点：

<table data-bind="grid: gridConfig" class="table">
<tbody data-part="body" data-bind="foreach: { data: rows, as: 'row' }">
    <tr>
        <td data-bind="text: firstname"></td>
        <td data-bind="text: lastname"></td>
        <td data-bind="text: age"></td>
        <td><button class="btn btn-xs btn-danger" data-bind="click: $root.removeRow">Remove</button></td>
    </tr>
</tbody>

当我运行我的项目时，我得到了这个错误：

Unable to process binding "foreach: function (){return { data:rows,as:'row'} }"

Message: rows is not defined;
View: views/people/getPeople;
ModuleId: viewmodels/people/getPeople

如何正确配置 DurandalGrid？请给我看一个样品。谢谢

Answer 1

Durandal-grid 是一个 'widget'，因此首先您必须设置 Durandal 才能使用该小部件。步骤如下：

打开您的 'widgets' 文件夹 (app/widgets)。
在该文件夹中创建一个新文件夹（我的是 'grid'）。
将 2 个文件从 durandal-grid（view.html 和视图 model.js）复制到该文件夹（app/widgets/grid）。
修改您的 main.js 文件：

//specify which plugins to install and their configuration app.configurePlugins({ router:true, dialog: true, widget: { kinds: ['grid'] } });
'grid' 指的是您的新文件夹的名称。
尽情享受！！！

就这样，祝你好运!!!

如何在我的 Durandal SPA 项目中使用 DurandalGrid 小部件？

How use DurandalGrid widget in my Durandal SPA project?

durandal-2.0