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