0

マウス イベントに基づいてリンクを表示または非表示にする方法を決定しようとしています。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」からエラーが発生しています。私が間違っていることは何ですか？

ありがとう！

4

1 に答える 1

0

自己参照を使用してビュー モデルを作成してみましたか?

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

});

于 2013-04-18T20:54:12.873 に答える