我尝试构建网格堆栈破折号时遇到问题
当尝试加载页面时,我收到“未捕获的TypeError:无法读取未定义的属性'addWidget'。”(代码基于基本的网格堆栈序列化演示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>
有什么建议吗?我已经尝试了很多方法,但是一直死胡同
最好的解决方法是这个。当我输入getJSON时网格消失了
数据可以正常加载,我看到items
充满了我期望的数据。
答案 0 :(得分:0)
在loadGrid
方法中,此上下文似乎不正确,请尝试将其更改为:
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
将引用这些嵌套函数中的其他内容,可能是$
或_
。