0

Knockout JSの学習過程です。私は、Knockout と Javascript に関する Pluralsight に関する John Papa のチュートリアルをいくつか読んでいます。

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

次の結果が得られますが、2 人の名前 ('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 に答える