0

次のコードで、jquery テンプレートがレンダリングされないのはなぜですか? テンプレートが組み込まれていると思いましたか？ありがとうございました

<script id="friendsTemplate" type="text/html">

    <ul>

        {{each(index,friend) friends}}

        <li>${ friend.name }</li>

        {{/each}}
    </ul>

</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/knockout-2.2.1.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <h1>details</h1>

        <p>first name: <input data-bind="value: firstName" /></p>
        <p>last name: <input data-bind="value: lastName" /></p>

        <p>full name: <span data-bind ="text: fullName"></span></p>

        <h2>friends</h2>
        <div data-bind="template: 'friendsTemplate'"></div>


        <script id="friendsTemplate" type="text/html">

            <ul>

                {{each(index,friend) friends}}

                <li>${ friend.name }</li>

                {{/each}}
            </ul>

        </script>


    </div>
    </form>
</body>
</html>


<script type ="text/javascript">

    function friend(name) {
        return {
            name: ko.observable(name)
        };
    }

    var viewModel ={
        firstName: ko.observable("bert"),
        lastName: ko.observable("smith"),
        friends:ko.observableArray([new friend('steve'),new friend('annie')])
    };

    viewModel.fullName = ko.dependentObservable(function () {
        return this.firstName() + " " + this.lastName();
    },viewModel);

    ko.applyBindings(viewModel);
</script>
4

2 に答える 2

4

jQuery.tmpl サポートは組み込まれていますが、jQuery と jQuery.tmpl を参照して、以下のドキュメントに記載されているように機能させる必要があります。注 6: 外部文字列ベースのテンプレート エンジンである jQuery.tmpl の使用

デフォルトでは、Knockout は jquery.tmpl をサポートしています。これを使用するには、次のライブラリをこの順序で参照する必要があります。

<!-- First jQuery -->     <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- Then jQuery.tmpl --> <script src="jquery.tmpl.js"></script>
<!-- Then Knockout -->    <script src="knockout-x.y.z.js"></script>

すべての依存関係を参照すると、コードは正常に動作するはずです: Demo JSFiddle

于 2013-04-19T08:12:37.533 に答える
1

テンプレートにデータ オブジェクトを渡す必要があります。

data-bind="template: { name: 'friendsTemplate', data: $data }"

詳細については、http://knockoutjs.com/documentation/template-binding.htmlを参照してください。

jQuery テンプレートを使用している理由はありますか? 以下は、「典型的な」ノックアウトの使用法とより一致しています。また、再利用がある場合にのみ、外部テンプレートを使用する必要があります。このコードは簡単にインライン化できます。

<script id="friendsTemplate" type="text/html">
    <ul data-bind="friends">
        <li data-bind="text: name"></li>
    </ul>
</script>
于 2013-04-19T08:13:24.030 に答える