使用KnockoutJS 3.3.0和原始Ducksboard gridster repo的0.5.6版本。我有一个observableArray，它与我的gridster ul绑定。我在模板绑定中使用afterAdd和beforeRemove回调来跟踪knockout何时添加和删除列表中项目的DOM节点，以便我可以通知Gridster。
有趣的是，li节点永远不会返回到beforeRemove回调，以便我适当地处理它们。例如，当删除数组中的项时，beforeRemove回调将触发与该项关联的文本节点，但不会触发li本身。有一些方法可以解决它，但这表明gridster / jquery和knockout如何跟踪DOM之间存在一些不兼容性，并且可能至少是我正在跟踪的内存问题的一部分。
在小提琴的控制台输出中，您可以看到li节点已正确添加，但是当从knockout数组中删除对象时，绑定到beforeRemove回调的removeGridster函数永远不会为li节点触发。我已经挖掘了几个小时的源代码，但没有看到任何会导致这种情况的因素。
任何淘汰赛/ jquery / gridster专家都会关注这个问题吗？
http://jsfiddle.net/8u0748sb/8/
HTML
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);
};
}
JS
class PackageAdmin(admin.ModelAdmin):
def has_change_permission(self, request, obj):
if request.user.is_super_user():
# allow superusers to edit all packages
return True
if obj is None:
# The docs say that the method should handle obj=None
# Don't allow user to edit packages in general
return False
# Let the user edit the package if they are the owner.
return obj.owner == request.user
答案 0 :(得分：1)
我注意到有关你代码的两件事：
首先，您用来实例化Gridster的选择器位于容器div上，而不是应该包含代表小部件的li元素的ul。因此，li元素被创建为容器div的子元素而不是ul元素，Knockout在触发beforeremove时会报告该元素。现在，beforeremove回调报告正在删除的空白节点，而不是兄弟节点。更新选择器将解决部分问题。
其次，在检查代码的小提琴时，我发现ul元素（定义模板+ foreach实现）和表示模板内容的li元素之间的空格也会导致问题。因此，即使您更正了Gridster选择器，您仍然只能看到在beforeremove回调中报告的空白节点。消除该空格似乎可以确保在beforeremove回调中报告li元素而不是空白。
我不是淘汰赛的专家，因此我不能全面解释原因，但进行这两项更改可以解决您报告的问题。下面是一个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);
};
}