KnockoutJS：如何从 select 选项获取默认项并在页面加载时作为参数传递给另一个函数？

Question

我有一个 select 选项，它是通过绑定填充的。基于 selected 或默认值，Continent 作为参数传递给另一个函数，该函数使用与大陆 selected 相关的国家/地区信息填充 table。简而言之，table 是根据大陆填充的，但是这也是在页面首次加载时完成的：

这是一个complete Fiddle example:

附加信息：

我试图在使用 table 中的第一条记录加载页面时加载国家/地区详细信息的其他数据。我需要将国家 ID 传回 view model 中的 function。

插图：

目前，我正在使用点击事件来填充附加数据，如下所示：

<table id="country-list">
    <thead>
    <tr>
        <th>CountryID</th>
        <th>Country Name</th>
        <th>City</th>
        <th>Continent</th>
        <th>CountryAbbr</th>
    </tr>
    </thead>
    <tbody data-bind= "foreach: FilteredCountries">

      <!-- Return row data to CountryDetails and use the info to
           bind data based on row clicked-->

    <tr data-bind="click: $root.CountryDetails, clickBubble: false">
        <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>

代码：

self.CountryDetails = function(country)
{
    var data = ko.computed(function() {

        return ko.utils.arrayFilter(self.CountryDetailData(), function(item) {
            return item.CountryId === country.CountryId;
        });
    });

    self.CountryId(data()[0].CountryId);
    self.Location(data()[0].Location);
    self.Coordinates(data()[0].Coordinates);
    self.Coastline(data()[0].Coastline);
    self.Climate(data()[0].Climate);
    self.Terrain(data()[0].Terrain);
}

Complete example code in fiddle:

Answer 1

绑定模型后，只需调用 CountryDetails 与 FilteredCountries 中的第一个国家：

var vm = new ViewModel;
ko.applyBindings(vm);

vm.CountryDetails(vm.FilteredCountries()[0]);

您还可以使用以下方法突出显示所选行：

// CSS
tbody tr.active { background-color: #ccc; }

// HTML
<tr data-bind="click: $root.CountryDetails, clickBubble: false, css: { active: $root.IsActiveRow(CountryId) }">

// JS
self.IsActiveRow = function (countryId) {
    return countryId == self.CountryId();
}

查看更新Fiddle

KnockoutJS：如何从 select 选项获取默认项并在页面加载时作为参数传递给另一个函数？

KnockoutJS: How to get default item from select option and pass as argument to another function when page loads?

javascript

jquery

knockout-2.0

knockout.js