0

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

该 <div data-bind="text: people().length" class="label">部分似乎工作没有问题。但是 foreach 绑定似乎有问题。

我尝试过并做了什么：

  1. 我检查了 Javascript 代码和 Markpup 并将其与他的进行比较，我看不出有什么区别。
  2. 我查看了 Chrome 中的开发者工具错误控制台。没有发生错误。
  3. 将一个简单的文本属性绑定到一个可观察的对象上就可以了。
  4. 将硬代码 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'）出现在记录下方。

你好淘汰赛！

记录：2

4

2 回答 2

3

您在包含 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>
于 2013-09-11T16:28:50.067 回答
2 
<div data-bind="text: people().length" class="label">
            <ul data-bind="foreach: people">
                <li>
                    <span data-bind="text: name"></span>
                </li>
            </ul>
        </div>

当您绑定计数时，您将 div 的全部内容替换为“2”，这可能包括覆盖其中包含的 ul，使其永远无法被绑定。

你可以试试这个：

<span data-bind="text: people().length" class="label"></span>
          <ul data-bind="foreach: people">
                <li>
                    <span data-bind="text: name"></span>
                </li>
            </ul>
于 2013-09-11T16:29:29.750 回答