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中的一个错误......我在这里做错了什么，或者这只是一个错误？

Answer 1

使用for-each进行数据绑定后，您处于for循环元素的范围（也称为绑定上下文）中，并且找不到对availableCountries的引用了。

你试过吗

$parent.availableCountries

如果它不是它的直接父级，则以下内容可能会有所帮助（取决于您的代码）：

$root.availableCountries

要详细了解绑定上下文：http://knockoutjs.com/documentation/binding-context.html

Knockout JS中的错误，在foreach循环中使用<select>元素</select>

1 个答案: