Question

我是淘汰js的新手，我正在尝试我的实例，所以我有这个

<script>
var Country = function(name, population) {
    this.countryName = name;
    this.countryPopulation = population;
};

var viewModel = {

    availableCountries : ko.observableArray([
        new Country("UK", 65000000),
        new Country("USA", 320000000),
        new Country("Sweden", 29000000)
    ]),
    selectedCountry : ko.observable() // Nothing selected by default
};  

$(function(){ko.applyBindings(viewModel)});

</script>

并在视图中

<p>Your country:
<select data-bind="options: availableCountries, optionsText: 'countryName', value: selectedCountry, optionsCaption: 'Choose...'"></select>
</p>

<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
You have chosen a country with population
<span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation :     'unknown'"></span>.
</div>

我的问题是我希望下拉列表在初始化时具有预先选择的值，所以我尝试了这个

selectedCountry : ko.observable(new Country("UK", 65000000))

但它不起作用“选择...”仍然显示为预先选择的选项文本而不是“英国”然后我尝试了

selectedCountry : ko.observable(availableCountries[0])

但我一直收到此错误

“未捕获的TypeError：无法读取未定义的属性'0'”

我做错了什么，如何解决？

Answer 1

定义viewModel对象后，添加以下内容：

viewModel.selectedCountry(viewModel.availableCountries()[0]);

你无法在声明对象时引用一个对象的值（至少我认为你不能），所以你需要在事后进行赋值。

另一种选择是将viewModel定义为函数：

var viewModel = function (){
    var self = this;

    self.availableCountries = ko.observableArray([
        new Country("UK", 65000000),
        new Country("USA", 320000000),
        new Country("Sweden", 29000000)
    ]);

    self.selectedCountry = ko.observable(self.availableCountries()[0]) 
};

Answer 2

我认为解决方法是将您选择的值设置为“UK”。由于值绑定只读取值而不是整个对象。

因此，当您在索引0处设置对象时，该项目不会被识别为值。

HTH

Knockout JS任意对象绑定

2 个答案: