Knockout.js 从“选择”字段检索选定对象

我有一个由“选项”绑定填充的下拉列表，希望能够从更改事件的选项列表中检索当前选定的对象

例如，如果所选选项更改为UK，我希望能够从getValue方法访问UK Country对象，如图所示：

var Country = function(name, population, countrytype) {
    this.countryName = name;
    this.countryPopulation = population;
    this.countryType = countrytype;
    this.selected = ko.observable( false );
};        

var viewModel = {
    getValue: function( item ) {
        // set selected item's "selected" observable to true and the other items of the same countryType to false
        console.log( 'Item: ', item );
    },
    availableCountries : ko.observableArray([
        new Country("UK", 65000000, 'en'),
        new Country("USA", 320000000, 'en'),
        new Country("Sweden", 29000000, 'sv'),
        new Country("Test 1", 29000000, 'sv'),
        new Country("Test 2", 29000000, 'de'),
        new Country("Test 3", 29000000, 'de')
    ]),
    getByType : function( areaLabel ) {
        var results = [];

        ko.utils.arrayForEach( this.availableCountries(), function( item ) {
            if ( item.countryType === areaLabel ) {
                results.push( item );
            }
        });

        return results;
    },
    selectedCountry : ko.observable() // Nothing selected by default
};

ko.applyBindings(viewModel);

---

工作示例：

这就是您想要做的吗

如果是这样，则不需要使用

getValue

功能，您可以使用

selectedCountry

访问已选择的国家/地区。您忘记了在select HTML元素中设置

值

绑定：

<select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry"></select>

<span data-bind="text: selectedCountry().countryName"></span>

还有两件事：

“countryName”和“countryPopulation”不是可观察的属性，也许它们不应该是，只是要小心

在国家/地区类中不需要“选定”属性

---

这就是你想做的吗

如果是这样，则不需要使用

getValue

功能，您可以使用

selectedCountry

访问已选择的国家/地区。您忘记了在select HTML元素中设置

值

绑定：

<select data-bind="options: availableCountries,
                   optionsText: 'countryName',
                   value: selectedCountry"></select>

<span data-bind="text: selectedCountry().countryName"></span>

还有两件事：

“countryName”和“countryPopulation”不是可观察的属性，也许它们不应该是，只是要小心

在国家/地区类中不需要“选定”属性

---

射击打败我！因此，为了非常清楚@hereswhatiid，您的getValue方法将包含

console.log（'Item:'，viewModel.selectedCountry（）.countryName）@Jayayn，对于他的实现，countryName和countryPopulation不需要是可见的。当然，除非在这段代码之外有某种原因，否则它们需要被删除。@Grinn好吧，我刚刚刷新了knockoutJS上的问题，他的问题只在7秒后就出现了：-）而且，我同意，它不一定需要是可观察的，我只想提一下。问题是我确实需要使用“选定的”属性，因为此对象数组正在其他地方使用，并且该属性正在使用中。我将用这些信息编辑问题。问题是您没有将列表中的任何“值”绑定关联起来，这意味着您无法知道正确选择了哪个项目（我的意思是，不使用敲除，您可以通过检查选择框项目）。“getValue”函数的“item”参数实际上是整个视图模型。我刚刚创建了一个selectedC1值来保存已选择的项，然后修改了“getValue”函数。看看这里：开枪。打败我！因此，为了非常清楚@hereswhatiid，您的getValue方法将包含
console.log（'Item:'，viewModel.selectedCountry（）.countryName）@Jayayn，对于他的实现，countryName和countryPopulation不需要是可见的。当然，除非在这段代码之外有某种原因，否则它们需要被删除。@Grinn好吧，我刚刚刷新了knockoutJS上的问题，他的问题只在7秒后就出现了：-）而且，我同意，它不一定需要是可观察的，我只想提一下。问题是我确实需要使用“选定的”属性，因为此对象数组正在其他地方使用，并且该属性正在使用中。我将用这些信息编辑问题。问题是您没有将列表中的任何“值”绑定关联起来，这意味着您无法知道正确选择了哪个项目（我的意思是，不使用敲除，您可以通过检查选择框项目）。“getValue”函数的“item”参数实际上是整个视图模型。我刚刚创建了一个selectedC1值来保存已选择的项，然后修改了“getValue”函数。在这里查看：