Javascript 如何基于模板中的mouseover/mouseout绑定可见性

我正在尝试根据鼠标事件确定显示或隐藏链接的方法。从JSFIDLE来看，我似乎无法让它工作。这就是我到目前为止所做的：

HTML:

我知道随着数据的显示和链接的隐藏，绑定工作正常。但是，当我mouseover或mouseout时，控制台中会出现以下错误：

Uncaught TypeError: Object #<Object> has no method 'deleteVisible' 
    viewModel.hideDelete
    (anonymous function)
    jQuery.event.dispatch
    elemData.handle

UncaughtTypeError:对象#没有“deleteVisible”方法
viewModel.hideDelete
（匿名函数）
jQuery.event.dispatch
elemData.handle

因此，错误来自viewmodel中的“hideDelete”。知道我做错了什么吗

---

谢谢

您是否尝试过使用自参考创建视图模型

$(function() {

var data = [ {name: "Bob"}, {name: "Joe"}, {name: "John"} ]; 
function viewModel (){
    var self = this; 
    self.list = ko.observableArray(data);
    self.deleteVisible = ko.observable(false);
    self.addItem = function() {
        self.list.push({name: "Steve"});                       
    };
    self.removeItem = function() {
        self.list.pop();
    };        
    self.showDelete = function() {
        self.deleteVisible(true);
    };        
    self.hideDelete = function() {
        self.deleteVisible(false);
    };        
};
ko.applyBindings(viewModel);    

}))

Uncaught TypeError: Object #<Object> has no method 'deleteVisible' 
    viewModel.hideDelete
    (anonymous function)
    jQuery.event.dispatch
    elemData.handle

$(function() {

var data = [ {name: "Bob"}, {name: "Joe"}, {name: "John"} ]; 
function viewModel (){
    var self = this; 
    self.list = ko.observableArray(data);
    self.deleteVisible = ko.observable(false);
    self.addItem = function() {
        self.list.push({name: "Steve"});                       
    };
    self.removeItem = function() {
        self.list.pop();
    };        
    self.showDelete = function() {
        self.deleteVisible(true);
    };        
    self.hideDelete = function() {
        self.deleteVisible(false);
    };        
};
ko.applyBindings(viewModel);