Using KnockoutJS 3.3.0 and the 0.5.6 release of the original Ducksboard gridster repo. I have an observableArray that is bound to my gridster ul. I'm using the afterAdd and beforeRemove callbacks in the template binding to track when knockout is adding and removing the DOM nodes for the items in my list so that I can inform Gridster.
The interesting thing is that the li nodes are never returned to the beforeRemove callback for me to appropriately handle them. For example, when an item in the array is removed the beforeRemove callback fires for the text nodes that are associated with that item, but not for the li itself. There are ways to work around it, but this is indicative of some incompatibility between how gridster/jquery and knockout are tracking the DOM and is likely at least part of the memory issues that I am tracking.
In the console output for the fiddle, you can see that the li nodes are added appropriately but when the objects are removed from the knockout array the removeGridster function that is bound to the beforeRemove callback never fires for the li nodes. I've dug through the source code for a couple of hours and am not seeing anything that would be causing this.
Any knockout/jquery/gridster experts care to chime in?
http://jsfiddle.net/8u0748sb/8/
HTML
<button data-bind='click: add1'> Add 1 </button>
<button data-bind='click: add20'> Add 20 </button>
</button>
<div class="gridster">
<!-- The list. Bound to the data model list. -->
<ul data-bind="template: {foreach: board().widgets, afterAdd: board().addGridster, beforeRemove: board().removeGridster}"
id="board-gridster">
<li data-bind="attr: {'id': id, 'data-row': dataRow, 'data-col': dataCol,'data-sizex': datasizex, 'data-sizey': datasizey}"
class='gs-w'
style='list-style-type: none; background:#99FF99;'>
<div data-bind="click: removeSelected"
style='float:right; cursor: pointer'>
X
</div>
<div data-bind='if: state() === "Minimized"'>
<span data-bind="style:{ 'backgroundColor': color">
-
</span>
</div>
<div data-bind='if: state() === "Maximized"'>
<span data-bind="text: value">
</span>
</div>
</li>
</ul>
</div>
JS
var vm;
$(function() {
vm = new MainViewModel();
ko.applyBindings(vm);
});
function MainViewModel() {
var self = this;
self.board = ko.observable(new BoardViewModel());
self.add1= function() {
self.board().addRandomWidget();
};
self.add20 = function() {
for(var i = 0; i < 20; i++) {
self.add1();
}
};
};
function BoardViewModel () {
var self = this;
// Used for binding to the ui.
self.widgets = ko.observableArray([]);
// Initialize the gridster plugin.
self.gridster = $(".gridster").gridster({
widget_margins : [8, 5],
widget_base_dimensions : [100, 31],
extra_rows: 2,
resize : {
enabled : false
}
}).data('gridster');
self.cols = self.gridster.cols;
self.rows = self.gridster.rows;
/**
* Used as a callback for knockout's afterAdd function. This will be called
* after a node has been added to the dom from the foreach template. Here,
* we need to tell gridster that the node has been added and then set up
* the correct gridster parameters on the widget.
*/
self.addGridster = function (node, index, obj) {
var widget = $(node);
var column = widget.attr("data-col");
console.log('adding: ');
console.log(node);
// afterAdd is called one for each html tag.
// We only want to process it for the main tag, which will have a data-col
// attribute.
if (column) {
// width and height
var sizeX = obj.datasizex;
var sizeY = (obj.state() === "Minimized" || obj.state() === "Closed")? 1 : obj.datasizey;
// add the widget to the next position
self.gridster.add_widget(widget, sizeX, sizeY);
}
};
/**
* Used as a callback for knockout's beforeRemove. Needs
* to remove node parameter from the dom, or tell gridster
* that the node should be removed if it is an li.
*/
var hackPrevWidget = null;
self.removeGridster = function (node, index, widget) {
// TODO this is never called on the li.
console.log("Removing");
console.log(node);
// Only including this so that the widget goes
// away from gridster. We should not have to
// Have this strange hack. Ideally, we
// could check to see if the current node is
// an li and then remove it from gridster,
// but something is preventing it from ever
// being passed in. What is happening to this
// node that causes knockout to lose it?
if (widget !== hackPrevWidget) {
self.gridster.remove_widget($('#' + widget.id));
} else {
node.parentNode.removeChild(node);
}
hackPrevWidget = widget;
};
/**
* Adds a new widget to the knockout array.
*/
self.addRandomWidget = function() {
self.widgets.push(new Widget());
};
/**
* Remove a widget from knockout
*/
self.removeWidget = function(widget) {
self.widgets.remove(widget);
};
};
var ids = 1;
function Widget(args) {
var self = this;
var col, row;
// We keep an id for use with gridster. This must be here if we
// are still using gridster in the widget container.
self.id = ids++;
/*------------- Setup size ------------------*/
self.datasizex = 2;
self.datasizey = 6;
/*------------- Setup position ------------------*/
self.dataRow = 0;
self.dataCol = 0;
self.value = ko.observable(Math.random());
self.state = ko.observable(Math.random() > .5 ? "Maximized" : "Minimized");
self.removeSelected = function () {
vm.board().removeWidget(this);
};
}
I noticed two things about your code:
First, the selector you're using to instantiate Gridster is on the container div rather than the ul which should contain the li elements representing the widgets. Because of this, the li elements are being created as children of the container div rather than the ul element, which Knockout is reporting back on when triggering beforeremove. Right now, the beforeremove callback is reporting on whitespace nodes that are being removed, and not the sibling li nodes. Updating the selector will solve part of your problem.
Second, while examining the fiddle with your code, I found that whitespace between the ul element (which defines the template + foreach implementation) and the li elements that represent the content of the template also causes issues. So even if you correct the Gridster selector, you'd still only be seeing whitespace nodes being reported back in the beforeremove callback. Eliminating that whitespace appears to ensure that the li elements are reported back in the beforeremove callback instead of the whitespace.
I'm not a Knockout expert, so I don't have a comprehensive explanation for why this is, but making these two changes addresses the problem you're reporting. Below is a jsfiddle with those changes put into place. There are still some issues with styling and Gridster configuration, but the widgets will be reported back as expected and removed correctly.
http://jsfiddle.net/PeterShafer/2o8Luyvn/1/
Best of luck with your implementation.
HTML
<button data-bind='click: add1'> Add 1 </button>
<button data-bind='click: add20'> Add 20 </button>
</button>
<div class="gridster">
<!-- The list. Bound to the data model list. -->
<ul data-bind="template: {foreach: board().widgets, afterAdd: board().addGridster, beforeRemove: board().removeGridster}"
id="board-gridster"><li data-bind="attr: {'id': id, 'data-row': dataRow, 'data-col': dataCol,'data-sizex': datasizex, 'data-sizey': datasizey}"
class='gs-w'
style='list-style-type: none; background:#99FF99;'>
<div data-bind="click: removeSelected"
style='float:right; cursor: pointer'>
X
</div>
<div data-bind='if: state() === "Minimized"'>
<span data-bind="style:{ 'backgroundColor': color">
-
</span>
</div>
<div data-bind='if: state() === "Maximized"'>
<span data-bind="text: value">
</span>
</div>
</li></ul>
</div>
JS
var vm;
$(function() {
vm = new MainViewModel();
ko.applyBindings(vm);
});
function MainViewModel() {
var self = this;
self.board = ko.observable(new BoardViewModel());
self.add1= function() {
self.board().addRandomWidget();
};
self.add20 = function() {
for(var i = 0; i < 20; i++) {
self.add1();
}
};
};
function BoardViewModel () {
var self = this;
// Used for binding to the ui.
self.widgets = ko.observableArray([]);
// Initialize the gridster plugin.
self.gridster = $(".gridster ul").gridster({
widget_margins : [8, 5],
widget_base_dimensions : [100, 31],
extra_rows: 2,
resize : {
enabled : false
}
}).data('gridster');
self.cols = self.gridster.cols;
self.rows = self.gridster.rows;
/**
* Used as a callback for knockout's afterAdd function. This will be called
* after a node has been added to the dom from the foreach template. Here,
* we need to tell gridster that the node has been added and then set up
* the correct gridster parameters on the widget.
*/
self.addGridster = function (node, index, obj) {
var widget = $(node);
var column = widget.attr("data-col");
console.log('adding: ');
console.log(node);
// afterAdd is called one for each html tag.
// We only want to process it for the main tag, which will have a data-col
// attribute.
if (column) {
// width and height
var sizeX = obj.datasizex;
var sizeY = (obj.state() === "Minimized" || obj.state() === "Closed")? 1 : obj.datasizey;
// add the widget to the next position
self.gridster.add_widget(widget, sizeX, sizeY);
}
};
/**
* Used as a callback for knockout's beforeRemove. Needs
* to remove node parameter from the dom, or tell gridster
* that the node should be removed if it is an li.
*/
//var hackPrevWidget = null;
self.removeGridster = function (node, index, widget) {
// TODO this is never called on the li.
console.log("Removing");
console.log(node);
// Only including this so that the widget goes
// away from gridster. We should not have to
// Have this strange hack. Ideally, we
// could check to see if the current node is
// an li and then remove it from gridster,
// but something is preventing it from ever
// being passed in. What is happening to this
// node that causes knockout to lose it?
//if (widget !== hackPrevWidget) {
// self.gridster.remove_widget($('#' + widget.id));
//} else {
node.parentNode.removeChild(node);
//}
//hackPrevWidget = widget;
};
/**
* Adds a new widget to the knockout array.
*/
self.addRandomWidget = function() {
self.widgets.push(new Widget());
};
/**
* Remove a widget from knockout
*/
self.removeWidget = function(widget) {
self.widgets.remove(widget);
};
};
var ids = 1;
function Widget(args) {
var self = this;
var col, row;
// We keep an id for use with gridster. This must be here if we
// are still using gridster in the widget container.
self.id = ids++;
/*------------- Setup size ------------------*/
self.datasizex = 2;
self.datasizey = 6;
/*------------- Setup position ------------------*/
self.dataRow = 0;
self.dataCol = 0;
self.value = ko.observable(Math.random());
self.state = ko.observable(Math.random() > .5 ? "Maximized" : "Minimized");
self.removeSelected = function () {
vm.board().removeWidget(this);
};
}