无法使用 JSON 和 gridstack 读取未定义的 属性 addWidget
can't read property addWidget of undefined with JSON and gridstack
运行 我在尝试构建 gridstack dash 时遇到了问题
我在尝试加载页面时得到 "Uncaught TypeError: Cannot read property 'addWidget' of undefined"..(代码基于基本的 gridstack 序列化演示 https://github.com/gridstack/gridstack.js/blob/develop/demo/serialization.html)
我更改的脚本部分是
<script type="text/javascript">
$(function() {
var options = {};
$('.grid-stack').gridstack(options);
new function() {
this.grid = $('.grid-stack').data('gridstack');
this.loadGrid = function() {
this.grid.removeAll();
debugger;
const URL = `//${window.location.hostname}/dashboard/getDashboard`;
$.getJSON(URL, function(items) {
_.each(items, function(node) {
this.grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
node.x, node.y, node.width, node.height, true, 4, 12, 1, 8, node.id);
}.bind(this));
});
return false;
}.bind(this);
this.saveGrid = function() {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function(el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
});
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clearGrid = function() {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.loadGrid();
};
});
</script>
有什么建议吗?我已经尝试了很多东西,但总是死胡同
我能解决的最好问题是 this.grid 在我输入 getJSON
时消失
数据加载正常 顺便说一句,我看到 items
填充了我期望的数据。
loadGrid
方法中的 this 上下文似乎不正确,请尝试将其更改为:
this.loadGrid = function () {
this.grid.removeAll();
debugger;
const URL = `//${window.location.hostname}/dashboard/getDashboard`;
const context = this;
$.getJSON(URL, function (items) {
_.each(items, function (node) {
context.grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
node.x, node.y, node.width, node.height, true, 4, 12, 1, 8, node.id);
}.bind(this));
});
return false;
}.bind(this);
如果您没有使用正确的上下文,this
将引用那些嵌套函数中的其他内容,可能是 $
或 _
。
运行 我在尝试构建 gridstack dash 时遇到了问题
我在尝试加载页面时得到 "Uncaught TypeError: Cannot read property 'addWidget' of undefined"..(代码基于基本的 gridstack 序列化演示 https://github.com/gridstack/gridstack.js/blob/develop/demo/serialization.html)
我更改的脚本部分是
<script type="text/javascript">
$(function() {
var options = {};
$('.grid-stack').gridstack(options);
new function() {
this.grid = $('.grid-stack').data('gridstack');
this.loadGrid = function() {
this.grid.removeAll();
debugger;
const URL = `//${window.location.hostname}/dashboard/getDashboard`;
$.getJSON(URL, function(items) {
_.each(items, function(node) {
this.grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
node.x, node.y, node.width, node.height, true, 4, 12, 1, 8, node.id);
}.bind(this));
});
return false;
}.bind(this);
this.saveGrid = function() {
this.serializedData = _.map($('.grid-stack > .grid-stack-item:visible'), function(el) {
el = $(el);
var node = el.data('_gridstack_node');
return {
x: node.x,
y: node.y,
width: node.width,
height: node.height
};
});
$('#saved-data').val(JSON.stringify(this.serializedData, null, ' '));
return false;
}.bind(this);
this.clearGrid = function() {
this.grid.removeAll();
return false;
}.bind(this);
$('#save-grid').click(this.saveGrid);
$('#load-grid').click(this.loadGrid);
$('#clear-grid').click(this.clearGrid);
this.loadGrid();
};
});
</script>
有什么建议吗?我已经尝试了很多东西,但总是死胡同
我能解决的最好问题是 this.grid 在我输入 getJSON
时消失数据加载正常 顺便说一句,我看到 items
填充了我期望的数据。
loadGrid
方法中的 this 上下文似乎不正确,请尝试将其更改为:
this.loadGrid = function () {
this.grid.removeAll();
debugger;
const URL = `//${window.location.hostname}/dashboard/getDashboard`;
const context = this;
$.getJSON(URL, function (items) {
_.each(items, function (node) {
context.grid.addWidget($('<div><div class="grid-stack-item-content" /></div>'),
node.x, node.y, node.width, node.height, true, 4, 12, 1, 8, node.id);
}.bind(this));
});
return false;
}.bind(this);
如果您没有使用正确的上下文,this
将引用那些嵌套函数中的其他内容,可能是 $
或 _
。