如何綁定在一個模板

Question

我試圖確定一種方法來顯示或隱藏基於鼠標事件的鏈接基於鼠標懸停/鼠標移開時的可視性。從JSFiddle，我似乎無法讓它工作。這是我到目前爲止有：

HTML：

<ul multiple="multiple"> 
    <!-- ko foreach: list --> 
    <li data-bind="event: {mouseover: $parent.showDelete, mouseout: $parent.hideDelete}"> 
     <div > 
      <span style="vertical-align: center; height: 25px;" 
      data-bind="text: name"></span> 
      <a data-bind="visible: $data.deleteVisible" href="#">Remove</a> 
     </div> 
    </li>   
    <!-- /ko --> 
</ul> 
<p> 
    <button data-bind="click: addItem">Add</button> 
    <button data-bind="click: removeItem">Remove</button> 
</p> 

JS：

$(function() { 

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

我知道綁定工作正常，如顯示的數據和鏈接是隱藏的。然而，當我將鼠標放置或鼠標移開，我在控制檯中下列錯誤：

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

因此錯誤是由「hideDelete」我的視圖模型內的。任何想法我做錯了什麼？

謝謝！

Answer 1

您是否嘗試過使用自引用來製作視圖模型？

$(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);  

}）;