我一直致力于创建一个简单的模板化小部件,其中包含使用 dojo 的 dgrid。这是 my code in plunker :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
<div id="myContainer"></div>
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
}, {
name: 'myApp',
location: window.location.href.replace(/\/$/, "")
}]
}
</script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
var widget = new MyWidget.placeAt(myContainer);
});
</script>
</body>
</html>
SimpleTemplatedGridWidget.js
define([
"dijit/registry",
"dojo/_base/declare",
"dgrid/OnDemandGrid",
"dgrid/extensions/DijitRegistry",
"dijit/_TemplatedMixin",
"dojo/text!./SimpleTemplate.html"
],
function (registry, declare, Grid, DijitRegistry, _TemplatedMixin, template) {
return declare([_WidgetBase, _TemplatedMixin], {
data : [
{ first: 'Bob', last: 'Barker', age: 89 },
{ first: 'Vanna', last: 'White', age: 55 },
{ first: 'Pat', last: 'Sajak', age: 65 }
],
columns : {
first: 'First Name',
last: 'Last Name',
age: 'Age'
},
CustomGrid : declare([Grid, DijitRegistry]),
postCreate: function() {
myGrid = new CustomGrid({
columns: columns,
idProperty: "id"
}, this.AttachGrid);
myGrid.renderArray(data);
myGrid.startup();
}
});
});
SimpleTemplate.html
<div data-dojo-attach-point='AttachGrid'></div>
我看到无法在本地和 plunker 上破译的错误。我可能缺少什么?
最佳答案
你的代码有严重错误,有些是javascript基础,有些是dojo。
您的代码
var widget = new MyWidget.placeAt(myContainer);
应该是
var widget = new MyWidget().placeAt(myContainer);
此外,myContainer
令人困惑,为了广泛,我建议使用您已经包含的 dojo/dom
var widget = new MyWidget().placeAt(dom.byId('myContainer'));
现在,关于您的小部件,您的小部件正在扩展 _WidgetBase
但它不包含在内,所以
define([
"dijit/registry",
"dojo/_base/declare",
"dgrid/OnDemandGrid",
"dgrid/extensions/DijitRegistry",
"dijit/_WidgetBase", //You are missing this module
"dijit/_TemplatedMixin",
"dojo/text!./SimpleTemplate.html"
],
function (
registry,
declare,
Grid,
DijitRegistry,
_WidgetBase, //Also include it here
_TemplatedMixin,
template
) {
当扩展 _TemplatedMixin
时,我们需要定义 templateString
,它应该是一个加载了 dojo/text!....
的模板或一个静态模板,在你的情况下
return declare([_WidgetBase, _TemplatedMixin], {
templateString: template, //need to add
现在,您的 postCreate
函数引用了很多 undefined variable ,查看您的代码,我假设您想要获取小部件本身的属性,所以
postCreate: function() {
myGrid = new this.CustomGrid({
columns: this.columns,
idProperty: "id"
}, this.AttachGrid);
myGrid.renderArray(this.data);
myGrid.startup();
}
请注意,我在列
、data
和CustomGrid
的前面添加了this.
;
此更改解决了您的大部分问题,只剩下一个提示 already registered widget
我通过删除 DijitRegistry
模块解决了这个问题,因为我不知道是什么它确实存在并且已经用于。
我向您推荐一些链接:
Creating Template-based Widgets
Understanding _WidgetBase
希望对你有帮助
关于javascript - 用于显示 dgrid 的 Dojo 小部件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39046269/