Использование KnockoutJS 3.3.0 и версии 0.5.6 оригинального репозитория Ducksboard gridster. У меня есть observableArray, привязанный к моему gridster ul. Я использую обратные вызовы afterAdd и beforeRemove в привязке шаблона, чтобы отслеживать, когда нокаут добавляет и удаляет узлы DOM для элементов в моем списке, чтобы я мог сообщить Gridster.
Интересно то, что узлы li никогда не возвращаются обратному вызову beforeRemove, чтобы я мог правильно их обработать. Например, когда элемент массива удаляется, обратный вызов beforeRemove срабатывает для текстовых узлов, связанных с этим элементом, но не для самого li. Есть способы обойти это, но это указывает на некоторую несовместимость между тем, как gridster/jquery и Knockout отслеживают DOM, и, вероятно, по крайней мере часть проблем с памятью, которые я отслеживаю.
В выводе консоли для скрипки вы можете видеть, что узлы li добавляются соответствующим образом, но когда объекты удаляются из массива нокаута, функция removeGridster, связанная с обратным вызовом beforeRemove, никогда не срабатывает для узлов li. Я копался в исходном коде пару часов и не вижу ничего, что могло бы вызвать это.
Кто-нибудь из экспертов по нокауту/jquery/gridster захочет присоединиться?
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);
};
}
