Knockout JS中的错误，其中<select>元素位于foreach循环中

Question

我正在使用Knockout JS创建一个简单的下拉<select>框。我开始尝试使用Knockout JS文档中给出的示例：

<select data-bind="options: availableCountries"></select>
<script type="text/javascript">
var viewModel = {
availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) 
};
ko.applyBindings(viewModel);
</script>

这非常有效。

但是，如果我将<select>元素放置在foreach循环中：

<div data-bind="foreach: [1,2,3]">
<select data-bind="options: availableCountries"></select>
</div>
<script type="text/javascript">
var viewModel = {
availableCountries : ko.observableArray(['France', 'Germany', 'Spain'])
};
ko.applyBindings(viewModel);
</script>

现在，突然之间，KnockoutJS找不到对availableCountries的引用。Chrome在控制台中报告以下错误：

Uncaught ReferenceError: Unable to process binding "foreach: function (){return [1,2,3] }"
Message: Unable to process binding "options: function (){return availableCountries }"
Message: availableCountries is not defined 

这看起来真的像KnockoutJS中的一个bug。。。我是不是做错了什么，或者这只是一个bug？

Answer 1

使用for each进行数据绑定后，您就处于for循环元素的作用域(也称为绑定上下文)中，它再也找不到对可用国家的引用。

你试过吗

$parent.availableCountries

如果它不是它的直接父级，以下可能会有所帮助(取决于您的代码)：

$root.availableCountries

要了解有关绑定上下文的更多信息，请执行以下操作：http://knockoutjs.com/documentation/binding-context.html