Knockout js 内置变量 ($data)

我知道$data变量提供对上下文所在当前对象的访问。此外，我可以使用foreach绑定并将属性名称添加到books对象。

此代码遍历名为books的数组，结果在 DOM 中显示为项列表。

但是为什么如果我将该数组名称从书籍更改为任何其他名称，它不显示项目。

<!DOCTYPE html>
<html>
<head>
<title>Data Binding with KnockoutJS</title>
</head>
<body>
<ul >
<!-- ko foreach: books -->
<li data-bind="text: $data"></li>
<!-- /ko -->
</ul>
<script type='text/javascript' src='knockout-3.4.2.js'></script>
<script>
var ViewModel = function() {
var self = this;
self.books = [
'Journy to the earth',
'effective study plans'
];
};
var myModel = new ViewModel();
ko.applyBindings(myModel);
</script>
</body>
</html>

这是将数组名称更改为标题并导致错误后的代码。

<!DOCTYPE html>
<html>
<head>
<title>Data Binding with KnockoutJS</title>
</head>
<body>
<ul >
<li data-bind="text: $data"></li>
</ul>
<script type='text/javascript' src='knockout-3.4.2.js'></script>
<script>
var ViewModel = function() {
var self = this;
self.titles= [
'Journy to the earth',
'effective study plans'
];
};
ko.applyBindings(ViewModel);
</script>
</body>
</html>

问题是您在更改变量名称时省略了 foreach 部分：

<ul >
<!-- ko foreach: books -->
<li data-bind="text: $data"></li>
<!-- /ko -->
</ul>

您更改为

<ul >
<li data-bind="text: $data"></li>
</ul>

但应该改为

<ul >
<!-- ko foreach: titles -->
<li data-bind="text: $data"></li>
<!-- /ko -->
</ul>

请注意，我将 foreach 指令更改为使用新的变量名。

相关内容

最新更新

热门标签：