How to bind visibility based on mouseover/mouseout in a template

[Rockdocta]

Hi -

I  am trying to determine a way to show or hide a link based on mouse events. From JSFiddle, I can't seem to get it to work. This is what I have so far:

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);    
}); 

                                     

                                   

I know the bindings are working correctly, as the data is displayed and the link is hidden. However, when I mouseover or mouseout, I get the follow error in the console:

 

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

So the error is coming from "hideDelete" within my viewmodel. Any idea what I am doing wrong?

Thanks!

1. 
   
1. 
   
   
   
   
   

[Gunnar Liljas]

It's looking for deleteVisible on the item, but it belongs to the viewModel/parent

—
Sent from Mailbox for iPhone

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.