Question

我想用durandalJS和Asp.net Web Api框架创建SPA。我有一个viewmodel和一个视图，负责显示网格中的People列表以及分页和自定义行。
我为此目的使用了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是一个'小部件'，所以首先你必须设置Durandal来使用小部件。以下是步骤：

打开“小部件”文件夹（app / widgets）。
在该文件夹中创建一个新文件夹（我的是'网格'）。
将durandal-grid（view.html和view model.js）中的2个文件复制到该文件夹（app / widgets / grid）。
修改main.js文件：

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

就是这样，祝你好运！

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

1 个答案: