2015-05-15 100 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(); 

    }