Get index of the clicked element in knockout

2020-06-12 02:31发布

站内问答 / JavaScript
1803 2 5

What is the best way to get index of clicked element of an unordered list?

Let me provide an example. Say I have the following HTML code:

<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked">
         <p data-bind="text: title"></p>
    </li>
</ul>

Right now I have the following javascript code to get the index:

...

self.itemClicked = function(data, item) {
    var index = $(item.target).index();
}

...

But the problem is the if the target element is <p> for example, I get incorrect result. So how should I get the index of the clicked <li> element? Does knockout have some method for this or I should use jquery in some way?

2条回答
Bombasti
2楼-- · 2020-06-12 02:55

Instead of messing up your binding, it's much prettier getting the index inside the event function. You can get the binding context from the event.target, using the ko.contextFor(element)

self.click = function (data, event) {
    var context = ko.contextFor(event.target);
    console.log(context.$index());
};
查看更多
0人赞 添加讨论(0) 举报
爷、活的狠高调
3楼-- · 2020-06-12 02:58

I recommend using Knockout's $index context property. See example below (JsFiddle):

HTML

<!DOCTYPE html>
<html>
<body>
<ul data-bind="foreach: listItems">
    <li data-bind="click: $parent.itemClicked.bind($data, $index())">
         <p data-bind="text: title"></p>
    </li>
</ul>
</body>
</html>
​

JavaScript

var vmodel = {
    listItems: ko.observableArray([
        {title: "Able"},
        {title: "Baker"},
        {title: "Charlie"}]),
    itemClicked: function(index) {
        alert(index);
    }
};
ko.applyBindings(vmodel);​
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)