Javascript Gridstack在删除时未更新

下面是我使用敲除绑定的Gridstack布局示例。问题是，我的视图没有在应该更新的时候根据模型进行更新

按下

Delete me

后，控制台输出显示

widgets

可观察数组得到正确更新，而视图没有得到正确更新。原因似乎在这一行（未被调用）：

据我所知，

foreach

绑定应该自动更新，为什么不呢

var ViewModel=function（）{
var self=这个；
self.grid=null；
self.widgets=ko.observearray([{
x:0,，
y:0，
宽度：1，
身高：1
}, {
x:0,，
y:1,，
宽度：1，
身高：1
}]);
self.deleteWidget=函数（项）{
log（“widgets before”，self.widgets（））；
self.widgets.remove（项目）；
log（“widgets after”，self.widgets（））；
返回false；
};
self.afterAddWidget=函数（项目）{
if（self.grid==null）{
self.grid=$（'.grid stack'）.gridstack({
自动：错误
}).数据（“网格堆栈”）；
}
var item=\查找（items，函数（i）{
返回i.nodeType==1
});
self.grid.addWidget（项）；
ko.utils.domNodeDisposal.addDisposeCallback（项，函数（）{
self.grid.removeWidget（项）；
});
};
};
应用绑定（新的ViewModel（））
.grid堆栈{
背景：淡黄花；
}
.网格堆栈项内容{
颜色：#2c3e50；
文本对齐：居中；
背景色：#18bc9c；
}

删除我
Gridstack是一个DOM控制小部件。您需要某种绑定处理程序来使Knockout与DOM控制小部件配合使用

看起来你可能是在工作。它以某种内置绑定处理程序的方式使用组件。这似乎是可行的，但我建议将DOM操作放在绑定处理程序中

更新：下面是将gridstack代码放入绑定处理程序的示例。它只需包装一个
foreach
绑定处理程序，并在更新中向其添加
afterRender
选项。现在viewmodel看起来像一个viewmodel，您可以在一个页面上处理多个Gridstack，而不必选择错误的Gridstack


ko.bindingHandlers.gridstack={
init：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
init（元素、valueAccessor、allBindingsAccessor、数据、上下文）；
返回{
ControlsDescentBindings:true
};
},
更新：函数（元素、valueAccessor、allBindingsAccessor、数据、上下文）{
var widgets=valueAccessor（），
grid=$（元素）.gridstack（）.data（'gridstack'），
afterAddWidget=功能（项目）{
var item=\查找（items，函数（i）{
返回i.nodeType==1；
});
grid.addWidget（项目）；
ko.utils.domNodeDisposal.addDisposeCallback（项，函数（）{
grid.removeWidget（项目）；
});
},
newVA=函数（）{
返回{
数据：小部件，
afterRender:afterAddWidget
};
};
update（元素、newVA、allBindingsAccessor、数据、上下文）；
}
};
var ViewModel=函数（）{
var self=这个；
self.grid=null；
self.widgets=ko.observearray([{
x:0,，
y:0，
宽度：1，
身高：1
}, {
x:0,，
y:1,，
宽度：1，
身高：1
}]);
self.deleteWidget=函数（项）{
self.widgets.remove（项目）；
};
};
应用绑定（新的ViewModel（））
.grid堆栈{
背景：淡黄花；
}
.网格堆栈项内容{
颜色：#2c3e50；
文本对齐：居中；
背景色：#18bc9c；
}

删除我
问题实际上是由
结束标记之间的额外空格字符引起的。政府对此发出警告。在我的例子中，它是由代码格式化程序自动插入的，所以它没有被注意到。HTML模板中的行应该是
，并且
之间没有空格


var ViewModel=function（）{
var self=这个；
self.grid=null；
self.widgets=ko.observearray([{
x:0,，
y:0，
宽度：1，
身高：1
}, {
x:0,，
y:1,，
宽度：1，
身高：1
}]);
self.deleteWidget=函数（项）{
log（“widgets before”，self.widgets（））；
self.widgets.remove（项目）；
log（“widgets after”，self.widgets（））；
返回false；
};
self.afterAddWidget=函数（项目）{
if（self.grid==null）{
self.grid=$（'.grid stack'）.gridstack({
自动：错误
}).数据（“网格堆栈”）；
}
var item=\查找（items，函数（i）{
返回i.nodeType==1
});
self.grid.addWidget（项）；
ko.utils.domNodeDisposal.addDisposeCallback（项，函数（）{
self.grid.removeWidget（项）；
});
};
};
应用绑定（新的ViewModel（））
.grid堆栈{
背景：淡黄花；
}
.网格堆栈项内容{
颜色：#2c3e50；
文本对齐：居中；
背景色：#18bc9c；
}

删除我
您可能指的是这一部分：
ko.utils.domNodeDisposal.addDisposeCallback（item，function（）{self.grid.removeWidget（item）；}）尽管在我的示例中存在，但调用
self.grid.removeWidget（item）未生成。现在我想集中讨论一个快速解决这个问题的方法。我指的不是零件。我说的是击倒编程中的适当结构。请参阅更新的答案。
ko.utils.domNodeDisposal.addDisposeCallback(item, function () { 
    self.grid.removeWidget(item); 
});