获取knockout中被点击元素的索引和事件

Question

从this link我学会了如何在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>

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

谢谢

Answer 1

您最好使用委托处理程序： https://github.com/rniemeyer/knockout-delegatedEvents/

这样你就可以将一个事件处理程序附加到根节点，传递给你的视图模型函数的参数就是你需要的数据（第一个参数是对象，第二个是事件）。加上范围'this' 将是正确的。

我几乎只使用事件委托，因为一切都按我预期的那样工作。

Answer 2

我同意 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 标签上使用锚标签。

祝你好运！

Answer 3

在函数中再添加一个要接收的参数，它将包含事件详细信息小提琴手：- 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

In some scenarios, you may need to access the DOM event object associated with your click event. Knockout will pass the event as the second parameter to your function

在您的场景中，您正在绑定数据、数据、索引等最后一个参数将是事件

Answer 4

我看到这个问题已经得到了答复，但我想分享一种可以帮助某人的不同方法：除了将 $index 作为参数传递给点击函数外，您还可以在函数内部做一些不同的事情：

您可以使用：

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

通过这种方式，您可以访问完整的上下文。访问 $index 现在很简单：

var index = context.$index();

所以完整的回复是：

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

    }

获取knockout中被点击元素的索引和事件

Get index and event of the clicked element in knockout

javascript

jquery

click

knockout.js