如何 fiddle 一个简单的 OnDemandList (dgrid)?
How to fiddle an easy OnDemandList (dgrid)?
我试图创建一个非常简单的 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();
});
您使用的是最新的 dstore,但使用的是旧的 dgrid。 < 1.x 版本的 dgrid 不支持 dstore,您可以使用常规 dojo/store/Memory 代替。在 dgrid < 1.x 中,您还需要 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'
},
我试图创建一个非常简单的 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();
});
您使用的是最新的 dstore,但使用的是旧的 dgrid。 < 1.x 版本的 dgrid 不支持 dstore,您可以使用常规 dojo/store/Memory 代替。在 dgrid < 1.x 中,您还需要 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'
},