Question

我有一个选择选项，通过绑定填充。基于所选择的或默认值，Continent作为参数传递给另一个函数，该函数使用与所选大洲的关系中的国家信息填充表。简而言之，该表是基于非洲大陆填充的，但是当页面首次加载时也会这样做：

其他信息：

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

插图：

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

<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选项中获取默认项并在页面加载时作为参数传递给另一个函数？

1 个答案: