添加新小部件后无法移动Gridstack小部件
使用RactiveJS,Redux和Gridstack制作应用程序。添加新小部件后无法移动Gridstack小部件
当新的小部件被添加时,一切正常,小部件也可移动/可调整大小。但是,当我删除所有小部件并添加,例如,两个新的,然后:
- 部件无法移动,无法调整大小。如图:
- 当试图删除它的小部件消失,但其他小部件改变他们的位置。
jsFiddle is provided as follows
你可以看到正确的部件被移到右侧,但办理停留在哪里。那么为什么是这样的行为,如何处理那?
RactiveJS应用程序由三个部分组成
DashboardComponent
WidgetGridComponent
WidgetComponent
法典规定如下:
var Widget = Ractive.extend({
isolated: false, // To pass events to WidgetGrid component (makeWidget, removeWidget, etc.)
template: '#widgetTemplate',
components: {},
oninit: function() {
// Load data to widget
},
oncomplete: function() {
this.drawChart();
},
drawChart: function() {
var self = this;
function exampleData() {
return [{
"label": "One",
"value": 29.765957771107
},
{
"label": "Two",
"value": 0
},
{
"label": "Three",
"value": 32.807804682612
},
{
"label": "Four",
"value": 196.45946739256
},
{
"label": "Five",
"value": 0.19434030906893
},
{
"label": "Six",
"value": 98.079782601442
},
{
"label": "Seven",
"value": 13.925743130903
},
{
"label": "Eight",
"value": 5.1387322875705
}
];
}
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) {
return d.label
})
.y(function(d) {
return d.value
})
.showLabels(true);
d3.select("#widget" + self.get("id") + " svg")
.datum(exampleData())
.transition().duration(350)
.call(chart);
return chart;
});
},
data: function() {
return {
id: null,
x: null,
y: null,
width: null,
height: null,
}
}
});
var WidgetGrid = Ractive.extend({
// isolated:false,
// twoway:false,
template: '#widgetGridTemplate',
components: {
Widget: Widget,
},
onrender: function() {
// Init gridstack instance
this.bindGridstack();
},
deleteWidget: function(id) {
Action.deleteWidget(id);
},
removeWidget: function(id) {
$(".grid-stack").data("gridstack").removeWidget("#widget" + id);
},
createWidget: function(id) {
$(".grid-stack").data("gridstack").makeWidget("#widget" + id);
},
updateWidgetSize: function(id, width, height) {
Action.updateWidgetSize(id, width, height);
},
updateWidgetPosition: function(id, x, y) {
Action.updateWidgetPosition(id, x, y);
},
bindGridstack: function() {
var self = this;
var options = {
animate: true,
auto: false, // if false gridstack will not initialize existing items (default: true)
float: true, // enable floating widgets (default: false)
disableOneColumnMode: true,
width: 10, // amount of columns (default: 12)
height: 10, // maximum rows amount. Default is 0 which means no maximum rows
// height: 10,
// cellHeight: 80,
disableResize: false,
disableDrag: false,
verticalMargin: 0,
resizable: {
handles: 'se'
}
};
var grid = $(".grid-stack").gridstack(options);
// On user ends resizing
grid.on('gsresizestop', function(event, elem) {
var $el = $(elem);
var node = $el.data('_gridstack_node');
var id = node.el.attr("id").replace("widget", "");
self.updateWidgetSize(id, node.width, node.height, node.el.css("width"), node.el.css("height"));
});
// On user ends dragging
grid.on('dragstop', function(event, ui) {
var $el = $(event.target);
var node = $el.data('_gridstack_node');
var id = $el.attr("id").replace("ar-widget", "");
self.updateWidgetPosition(id, node.x, node.y);
});
},
data: function() {
return {
widgets: [],
}
}
});
var Dashboard = Ractive.extend({
el: '#dashboard', //document.body,
template: '#dashboardTemplate',
isolated: true,
append: false,
oninit: function() {
this.on("add", function() {
Action.addWidget()
});
},
components: {
WidgetGrid: WidgetGrid,
},
data: function() {
return {
store: {}
}
}
});
有几个问题有:
detach
unrendering组件时不叫。只有在调用时才会调用它。您的网格不知道该小部件的删除。在Ractive将这些小部件元素解除封闭之后,这会导致网格出现怪异现象。另一方面,
grid.removeWidget()
从DOM中删除小部件。状态改变之后,Ractive仍会尝试放弃。但由于元素不再存在,并且由于Ractive不知道小部件的移除,它将导致双重移除。状态更改后,小部件的数据不再存在。
id
已经是undefined
。当您处理teardown
,unrender
和destruct
事件时,您不能再使用id
。您必须提前断开小部件与网格的连接,最好在状态更改前断开。
理想情况下,你应该让Ractive做元素的渲染/ unrendering,只告知gridstack有关使/从电网断开连接部件。您已使用makeWidget
而不是addWidget
来渲染。对于删除,你只需要做同样的事情。 removeWidget
接受第二个参数,如果false
将从网格中取消关联小部件但不从DOM中移除该元素。这在状态改变之后不会让Ractive失望。
下面是一个例子:https://jsfiddle.net/fm133mk6/
谢谢您的回答!但是你提供的小提琴,有其他问题:)我添加了三个小工具,移动它们(有些问题也移动了),然后尝试删除它们 - 首先删除成功,但其他人没有。你能检查你的小提琴吗? – Orbitum