2015-05-15 67 views
2

from this link我学会了如何获得在knockout中被点击的元素的索引。但我想用它获取数据和事件。在knockout中获取被点击元素的索引和事件

为我做了这样的事情,这数据的工作:

var vmodel = { 
    listItems: ko.observableArray([ 
     {title: "Able"}, 
     {title: "Baker"}, 
     {title: "Charlie"}]), 
    itemClicked: function(data,index) { 
     alert(data); 
     alert(index); 
    } 
}; 
ko.applyBindings(vmodel);​ 
<ul data-bind="foreach: listItems"> 
    <li data-bind="click: $parent.itemClicked.bind($data, $data, $index())"> 
     <p data-bind="text: title"></p> 
    </li> 
</ul> 

,但我不知道如何访问事件。

感谢

回答

1

放多了一个参数来接收功能,并且将包含活动详情 的jsfiddle: - https://jsfiddle.net/31unkhxm/8/

itemClicked: function(data,data,index,event) { 
     console.log("d is"+event.currentTarget); 
    } 

从KO文档

http://knockoutjs.com/documentation/click-binding.html

在某些情况下,您可能需要访问与您的点击关联的DOM事件对象 事件。淘汰赛将在活动作为 第二个参数传递给你的函数

在您的情况您有约束力的数据,数据,指标等,最后PARAM将事件

2

你可能会更好使用委托处理程序: https://github.com/rniemeyer/knockout-delegatedEvents/

这样你可以附加一个事件处理程序的根节点以及传递到您的视图模型函数的参数是数据你需要(第一个参数是对象,第二个是事件)。再加上'this'的范围是正确的。

我几乎只使用事件委派,因为所有事情都像我期望的那样工作。

1

我同意Magrangs该事件的代表团将是在这种情况下出众,但如果你在使用这种模式设置,你可以这样做:

<ul data-bind="foreach: listItems"> 
    <li data-bind="click: $parent.itemClicked.bind($data, $index())"> 
     <a data-bind="text: title"></a> 
    </li> 
</ul> 

var vmodel = { 

    listItems: ko.observableArray([ 
     {title: "Able"}, 
     {title: "Baker"}, 
     {title: "Charlie"}]), 

    itemClicked: function(index) { 
     console.log(event); 
     console.log(this); 
     console.log(index);  
    } 

}; 

ko.applyBindings(vmodel); 

取决于你想要达到的目的(触发另一动作),也许在订购观察到的会是这样的帮助:

myViewModel.personName.subscribe(function(newValue) { 
    alert("The person's new name is " + newValue); 
}); 

我也将使用锚标记用P标签的可访问性的原因。

祝你好运!

1

我已经看到,这个问题已经被回答,但我想分享一个不同的方法,可以帮助某人: 而不是将$ index作为参数传递给click函数,您可以做一些与inseide不同的功能本身:

您可以使用:

var context = ko.contextFor(event.target); 

通过这种方式您可以访问完整的上下文。访问$指数目前简单:

var index = context.$index(); 

等完整的答复是:

this.onClick = function (data, event) { 
     var context = ko.contextFor(event.target); 
     var index = context.$index(); 

    }