Question

在下面的代码中为什么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>

Answer 1

jQuery.tmpl支持是内置的，但是您需要引用jQuery和jQuery.tmpl以使其工作，如下面的文档中所述：Note 6: Using jQuery.tmpl, an external string-based template engine:

默认情况下，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

Answer 2

您需要将数据对象传递给模板。

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

查看http://knockoutjs.com/documentation/template-binding.html了解详情。

你有没有理由使用jQuery模板？以下更符合“典型”Knockout用法。如果有重用，您也应该只使用外部模板。这段代码很容易内联。

<script id="friendsTemplate" type="text/html">
    <ul data-bind="friends">
        <li data-bind="text: name"></li>
    </ul>
</script>

淘汰示例模板示例不起作用

2 个答案: