Question

我是学习Knockout JS的过程。我正在阅读John Papa关于Pluralsight关于Knockout和Javascript的一些教程。

<div data-bind="text: people().length" class="label">部分似乎没有问题。然而，foreach绑定似乎有问题。

我尝试过的事情：

我检查了Javascript代码和Markpup并将其与他进行了比较，我认为没有区别。
我查看了Chrome中的开发人员工具错误控制台。没有发生错误。
将一个简单的文本属性绑定到一个可观察的文本属性。
将硬编码observableArray绑定到标记并且它可以正常工作。

JS

    $(function () {
    var Person = function (name) {
        this.name = ko.observable(name);
    };

    var viewModel = (function () {
        var p1 = new Person('Da Vinci');
        var p2 = new Person('Michangelo');
        var people = ko.observableArray([p1, p2]);
        return {
            people: people
        };
    })();

    ko.applyBindings(viewModel);
});

HTML标记

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Knockout</title>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
</head>
<body>
    <h1>Hello Knockout!</h1>
    <section>
        Records: 
        <div data-bind="text: people().length" class="label">
            <ul data-bind="foreach: people">
                <li>
                    <span data-bind="text: name"></span>
                </li>
            </ul>
        </div>
    </section>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
    <script src="../Js/ViewModel/AuthorCart.js"></script>
</body>
</html>

我得到了以下结果，但我期待两个人的名字（'Da Vinci'和'Michangelo'）出现在记录下面。

Hello Knockout！

记录：2

Answer 1

您在包含div上的text绑定会覆盖元素的子元素，因此foreach已消失。

您可能希望先关闭容器：

  <div data-bind="text: people().length" class="label"></div>
  <ul data-bind="foreach: people">
       <li>
           <span data-bind="text: name"></span>
       </li>
  </ul>

Answer 2

<div data-bind="text: people().length" class="label">
            <ul data-bind="foreach: people">
                <li>
                    <span data-bind="text: name"></span>
                </li>
            </ul>
        </div>

绑定计数时，用“2”替换div的全部内容，这可能包括覆盖其中包含的ul，以便永远无法绑定。

你可以试试这个：

<span data-bind="text: people().length" class="label"></span>
          <ul data-bind="foreach: people">
                <li>
                    <span data-bind="text: name"></span>
                </li>
            </ul>

KO - foreach绑定似乎没有绑定但我无法解决它

JS

HTML标记

Hello Knockout！

2 个答案: