4

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/

4

2 に答える 2

2

ルートビューモデルではなく、個々のアイテムにリンクの非表示と表示を実装する必要があります。例えば：

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/

于 2012-10-05T21:47:09.010 に答える
1

投稿した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);
于 2012-10-05T21:41:30.140 に答える