使用KnockoutJS 3.3.0和原始Ducksboard gridster存储库的0.5.6版本。我有一个绑定到我的gridul ul的observableArray。我在模板绑定中使用afterAdd和beforeRemove回调来跟踪敲除何时为列表中的项目添加和删除DOM节点,以便通知Gridster。
有趣的是,li节点永远不会返回至beforeRemove回调,以便我适当地处理它们。例如,当删除数组中的一项时,beforeRemove回调将触发与该项关联的文本节点,但不会触发li本身。有多种方法可以解决此问题,但这表明gridster / jquery和敲除如何跟踪DOM之间存在一些不兼容,并且可能至少是我正在跟踪的部分内存问题。
在小提琴的控制台输出中,您可以看到正确添加了li节点,但是当从敲除数组中删除对象时,绑定到beforeRemove回调的removeGridster函数永远不会为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);
};
}
最佳答案
我注意到您的代码有两件事:
首先,用于实例化Gridster的选择器位于容器div上,而不是位于ul上的ul,后者应包含表示小部件的li元素。因此,li元素被创建为容器div的子元素,而不是ul元素,而ul元素被Knockout在触发触发删除之前重新报告。目前,beforeremove回调正在报告要删除的空白节点,而不是同级li节点。更新选择器将解决部分问题。
其次,在检查代码时,我发现ul元素(定义模板+ foreach实现)与代表模板内容的li元素之间的空格也会引起问题。因此,即使您更正了Gridster选择器,您仍只会在beforeremove回调中看到报告了空格节点。消除该空白似乎是为了确保li元素是在beforeremove回调而不是空白中返回的。
我不是淘汰赛专家,所以我没有这方面的全面解释,但是进行这两项更改可以解决您要报告的问题。下面是一个jsfiddle,其中包含了这些更改。样式和Gridster配置仍然存在一些问题,但是将按预期报告小部件并正确将其删除。
http://jsfiddle.net/PeterShafer/2o8Luyvn/1/
祝您实施顺利。
的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);
};
}