Получить индекс щелкнутого элемента в нокауте

Каков наилучший способ получить индекс щелкнутого элемента неупорядоченного списка?

Позвольте мне привести пример. Скажем, у меня есть следующий код HTML:

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

Прямо сейчас у меня есть следующий код javascript, чтобы получить индекс:

...

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

...

Но проблема в том, что если целевой элемент <p>, например, я получаю неверный результат. Итак, как мне получить индекс щелкнутого элемента <li>? У нокаута есть какой-то метод для этого, или я должен каким-то образом использовать jquery?

Ответ 1

Я рекомендую использовать контекстное свойство Knockout $index. Пример ниже (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);

Ответ 2

Вместо того, чтобы испортить вашу привязку, гораздо лучше получить индекс внутри функции события. Вы можете получить контекст привязки от event.target, используя ko.contextFor(element)

self.click = function (data, event) {
    var context = ko.contextFor(event.target);
    console.log(context.$index());
};