KO - 因为每个绑定似乎没有绑定，但我无法解决

KO - foreach binding does not seem to bind but I can't work it out

本文关键字：绑定 解决 因为 KO      更新时间：2023-09-26

我是学习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);
});

网页标记

<!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>

我得到以下结果，但我希望两个人的名字（"达芬奇"和"米彻奇洛"）出现在记录下方。

你好淘汰赛！

记录： 2

您在包含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>

<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>
相关文章：