Question

基本上我希望visible:仅在我悬停的div上启动，但它适用于所有这些，无论我在哪一个上空盘旋。

我想这是有道理的，因为我在visible:循环内绑定foreach:，所以它适用于所有这些。是否有一个KnockoutJS解决方法，或者我应该使用$jQuery.hover()来使其工作？

HTML

<div>
 <div data-bind="foreach: hostGroups">
  <div data-bind="css: { style: true }, event: { mouseover: $root.showDeleteLink, mouseout: $root.hideDeleteLink }">
   <span data-bind="text: hostName"></span>
   <span class="delete-link" data-bind="visible: $root.deleteLinkVisible">this is a delete link</span>
  </div>
 </div>
</div>

JavaScript的：

var data = [ 
    { "hostName": "server1" }, 
    { "hostName": "server2" }, 
    { "hostName": "server3" }
]; 

var viewModel = {

    hostGroups: ko.observableArray(data),

    deleteLinkVisible: ko.observable(false),

    showDeleteLink: function() {
         viewModel.deleteLinkVisible(true);
    },

    hideDeleteLink: function() {
        viewModel.deleteLinkVisible(false);
    }

};  

ko.applyBindings(viewModel);

http://jsfiddle.net/pruchai/KXtTU/3/

Answer 1

您应该实现隐藏并在每个单独的项目上显示链接，而不是在根视图模型上。例如：

<强> JavaScript的：

var data = [
    {
    "hostName": "server1"},
{
    "hostName": "server2"},
{
    "hostName": "server3"}
];

function Item(hostName) {
    var self = this;
    this.hostName = ko.observable(hostName);
    this.deleteLinkVisible = ko.observable(false);
    this.showDeleteLink = function() {
        self.deleteLinkVisible(true);
    };
    this.hideDeleteLink = function() {
        self.deleteLinkVisible(false);
    };
}

function ViewModel() {
    var self = this;

    this.hostGroups = ko.observableArray(ko.utils.arrayMap(data, function(item) {
        var newItem = new Item(item.hostName);
        return newItem;
    }));

}

var viewModel = new ViewModel();

ko.applyBindings(viewModel);

<强> HTML

<div>
 <div data-bind="foreach: hostGroups">
  <div data-bind="css: { style: true }, event: { mouseover: showDeleteLink, mouseout: hideDeleteLink }">
   <span data-bind="text: hostName"></span>
   <span class="delete-link" data-bind="visible: deleteLinkVisible">this is a delete link</span>
  </div>
 </div>
</div>

示例： http://jsfiddle.net/KXtTU/4/

Answer 2

您发布的jsfiddle中的showDeleteLink和hideDeleteLink会导致JavaScript错误。

以下是修复：http://jsfiddle.net/KXtTU/1/

更新了JS：

var data = [ 
        { "hostName": "server1" }, 
        { "hostName": "server2" }, 
        { "hostName": "server3" }
    ]; 

var viewModel = {

    hostGroups: ko.observableArray(data),

    deleteLinkVisible: ko.observable(false),

    showDeleteLink: function() {
         viewModel.deleteLinkVisible(true); // added "viewModel."
    },

    hideDeleteLink: function() {
        viewModel.deleteLinkVisible(false); // added "viewModel."
    }

};  

ko.applyBindings(viewModel);

Knockout JS：Visible适用于foreach：loop中的所有元素，而不是当前元素

2 个答案: