0

我无法弄清楚使用 JavaScript 对象和 KnockOutJS 选择选项的正确语法。我直接从http://knockoutjs.com/documentation/options-binding.html中获取了下面的示例，示例 3。

<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>

<script type="text/javascript">
    // Constructor for an object with two properties
    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
    };
</script>

selectedCountry 没有选择任何内容，如备注中所述。假设我想默认选择美国。

我试过这个：

selectedCountry : ko.observable([availableCountries()[1]])

我试过这个：

selectedCountry : ko.observable([new Country("USA", 320000000)])

我可能只是遗漏了一些非常明显的东西（我正在与极度感冒作斗争）......有人可以指出我的疏忽或误解吗？

4

1 回答 1

0

您遇到的问题是将您的视图模型声明为 JavaScript 对象文字的限制。当你尝试：

selectedCountry : ko.observable([availableCountries()[1]])

这相当于

selectedCountry : ko.observable([this.availableCountries()[1]])

并且由于您的对象文字尚未完全声明，因此“this”实际上指向没有“availableCountries”功能的外部范围（在这种情况下为全局）。如果你试试 ：

selectedCountry : ko.observable([viewModel.availableCountries()[1]])

您遇到了一个不同的问题，即 viewModel 在遇到结束 } 括号之前仍然是未定义的。

这里更好的方法是使用函数声明（或“构造函数”声明），如下所示：

var viewModel = function(){
   var self = this;
   self.availableCountries = ...
   self.selectedCountry = ko.observable(self.availableCountries()[1]);
}

var myViewModel = new viewModel();

这将允许您的所有内部引用在构建时存在。如果您的视图模型具有从父范围或子范围调用的任何事件处理程序，它还会处理一些参考问题。

希望这可以帮助！

于 2013-06-23T03:57:14.597 回答