Question

我知道 $ 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>

Answer 1

问题是您在更改变量名时省略了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指令以使用新变量名。

Knockout js内置变量（$ data）

1 个答案: