如何摆弄一个简单的 OnDemandList (dgrid)？答案

【问题标题】：How to fiddle an easy OnDemandList (dgrid)?如何摆弄一个简单的 OnDemandList (dgrid)？
【发布时间】：2017-08-23 14:36:44
【问题描述】：

我尝试创建一个非常简单的 jsfiddle 来测试 OnDemandList (sitepen/dgrid)。但它不会呈现任何行。有人知道我做错了什么吗？是不是一个简单的 dstore/Memory 不提供像 fetchRange 这样的方法？ jsFiddle 可以在这里找到：http://jsfiddle.net/rbeqqr2g/25/

require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        },
        {
            name: 'dstore',
            location: '//cdn.rawgit.com/SitePen/dstore/master'
        }
    ]
}, [
    'dgrid/OnDemandList',
    'dstore/Memory',
    'dojo/dom',
], function(OnDemandList, Memory, dom) {
    var data = [
        { id: 1, name: 'Peter' },
        { id: 2, name: 'Paul' },
        { id: 3, name: 'Mary' }
    ];
    var store = new Memory({ 
        data: data 
    });
    var list = new OnDemandList({
        collection: store,
        minRowsPerPage: 5,
        noDataMessage: "Keine Daten vorhanden",
        renderRow: function (object, options) {
            console.log("Zeile wurde gerendert.")
            var div = document.createElement('div');
            div.appendChild(document.createTextNode(object.name));
            return div;
        }
    }, dom.byId('list'));
    list.startup();
});

【问题讨论】：

标签： javascript dojo dgrid dstore

【解决方案1】：

您使用的是最新的 dstore，但使用的是旧的 dgrid。 store 属性而不是 collection。

require({
    ...
}, [
    'dgrid/OnDemandList',
    //'dstore/Memory',
    'dojo/store/Memory',  // < --- regular dojo/store
    'dojo/dom',
], function(OnDemandList, Memory, dom) {
    ...
    ...
    var list = new OnDemandList({
        //collection: store,
        store: store,      // <--- store property
        ...
    }, dom.byId('list'));
    list.startup();
});

http://jsfiddle.net/rbeqqr2g/28/

或者，除非您被 dgrid 0.3.x 困住，否则您也可以简单地使用现代 dgrid：

{
    name: 'dgrid',
    location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
    //location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},

【讨论】：