我有一个类似的问题,因为我想要 jQuery 拖放我的项目。我的解决方案变成使用 knockoutjs 模板将 beforeRemove 和 afterAdd 事件绑定到模型。Person 类/函数也是一个简单的淘汰视图模型。
在下面的示例中,我使用 .draggable(),但您可以轻松使用验证。添加您自己的代码来操作 observableArray,您应该一切顺利。
HTML:
<div data-bind="template: {foreach:attendeesToShow, beforeRemove:hideAttendee, afterAdd:showAttendee}">
<div class="person">
<img src="person.jpg" alt="" />
<div data-bind="text: firstName" ></div>
<div class="deleteimg" data-bind="click:$parent.removeAttendee" title="Remove"></div>
</div>
</div>
视图模型:
var ViewModel = function () {
var self = this;
var at = [new Person('First', 'Person', 'first@example.com'),
Person('Second', 'Person', 'second@example.com')
];
self.attendees = ko.observableArray(at);
self.removeAttendee = function (attendee) {
self.attendees.remove(attendee);
};
this.showAttendee = function (elem) {
if (elem.nodeType === 1) {
$(elem).hide().show("slow").draggable();//Add jQuery functionality
}
};
this.hideAttendee = function (elem) {
if (elem.nodeType === 1) {
$(elem).hide(function () {
$(elem).remove();
});
}
};
};
ko.applyBindings(new ViewModel());