12

順序付けされていないリストのクリックされた要素のインデックスを取得するための最良の方法は何ですか？

例を挙げましょう。次の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を使用する必要がありますか？

4

2 に答える 2

23

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);​
于 2012-11-05T17:37:04.067 に答える
16

バインディングを台無しにする代わりに、イベント関数内でインデックスを取得する方がはるかにきれいです。を使用して、からバインディングコンテキストを取得できます。event.targetko.contextFor(element)

self.click = function (data, event) {
    var context = ko.contextFor(event.target);
    console.log(context.$index());
};
于 2016-04-21T15:58:55.553 に答える