Как разместить событие click для каждой строки таблицы и передать результат в качестве аргумента для привязки новых данных к другому источнику?

Question

У меня есть следующий код, который заполняет select options и передает выбранное значение на другую функцию в модели представления, которая заполняет таблицу с данными, соответствующих выбранное значение:

В двух словах, если пользователь выбирает ASIA от выбора вариант, все страны Азии связывается с таблицей:

Fiddle Example here:

Как добавить событие щелчка к каждой строке в таблице, так что я могу передать CountryId строки, щелкнул в качестве аргумента другой функции в View Model? Мне нужно использовать аргумент и функцию для выполнения дополнительных привязок. Например: Country Detail.

Это то, что я до сих пор:

<div id="country-select"> 
    <select data-bind="options: UniqueContinent, 
         value: SelectedContinent"></select> 
</div> 

<table id="country-list"> 
    <tr> 
     <th>CountryID</th> 
     <th>Country Name</th> 
     <th>City</th> 
     <th>Continent</th> 
     <th>CountryAbbr</th> 
    </tr> 
    <tbody data-bind= "foreach: FilteredEntries"> 
    <tr> 
     <td data-bind="text: CountryId"></td> 
     <td data-bind="text: Country"></td> 
     <td data-bind="text: City"></td> 
     <td data-bind="text: Continent"></td> 
     <td data-bind="text: CountryAbbr"></td> 
    </tr> 
    </tbody> 
</table> 

JS код:

function ViewModel() { 
    var self = this; 

    self.CountryData = ko.observableArray([ 
    { 
    "City": "KABUL", 
    "Continent": "ASIA", 
    "Country": "AFGHANISTAN", 
    "CountryAbbr": "AF", 
    "CountryId": "102120" 
    }, 
    { 
    "City": "DHAKA", 
    "Continent": "ASIA", 
    "Country": "BANGLADESH", 
    "CountryAbbr": "BD", 
    "CountryId": "102136" 
    },  
    { 
    "City": "BRUSSELS", 
    "Continent": "EUROPE", 
    "Country": "BELGIUM", 
    "CountryAbbr": "BE", 
    "CountryId": "102139" 
    }, 
    { 
    "City": "MINSK", 
    "Continent": "EUROPE", 
    "Country": "BELARUS", 
    "CountryAbbr": "BY", 
    "CountryId": "102138" 
    }]); 

    self.SelectedContinent = ko.observable(''); 

    self.UniqueContinent = ko.dependentObservable(function() { 
     var continent = ko.utils.arrayMap(self.CountryData(), 

      function(item){ 

       return item.Continent 
      }) 

     return ko.utils.arrayGetDistinctValues(continent).sort(); 
    }); 

    // Call this function when changes are made 
    self.FilteredEntries = ko.computed(function() { 

     return ko.utils.arrayFilter(self.CountryData(), function(item) { 
      // I need to use the selected value 
      return item.Continent === self.SelectedContinent(); 
     }); 
    }); 
} 

ko.applyBindings(new ViewModel) 

Answer 1

Просто добавьте click обработчик к вашему <tr>:

<tr data-bind="click: $root.CountryDetails"> 

и в вашем сценарий:

self.CountryDetails = function(country) 
{ 
    doSomethingWithCountryId(country.CountryId); 
} 

function doSomethingWithCountryId(countryId) 
{ 
    // ... 
} 

Смотрите обновленный Fiddle и Documentation