淘汰赛模板不起作用答案

【问题标题】：knockoutjs template not working淘汰赛模板不起作用
【发布时间】：2012-02-14 13:20:51
【问题描述】：

我正在关注一个关于淘汰赛的视频，但我不知道为什么我的代码不起作用。

我正在使用这些 js 脚本：

    <script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script>
    <script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script>    

<h2>Friends</h2>
    <ul data-bind="template: {name: 'friendsTemplate', foreach:friends}"></ul>

    <script type="text/html" id="friendsTemplate">
        <li>${ data.name }</li>
    </script>

<script type="text/javascript">

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

    var viewModel = {
        friends : ko.observableArray([new friend('João'), new friend('Lucas')])
    };
    ko.applyBindings(viewModel);
</script>

这段代码返回给我这个，它显示了正确的朋友数量，但没有显示名字。

Friends
${ data.name }
${ data.name }

我做错了什么？

提前致谢。

编辑进行一些测试，这段代码可以工作，因为它没有使用模板，所以我的代码是正确的，问题只是模板。

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

【问题讨论】：

标签： knockout.js jquery-templates

【解决方案1】：

你应该在 knockoutjs 之前引用 jquery.tmpl

<script src="assets/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="assets/js/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="assets/js/knockout-2.0.0.js" type="text/javascript"></script>

并将 ${ data.name } 更改为 ${name}

http://jsfiddle.net/c8Svk/

【讨论】：

【解决方案2】：

试试：

<script type="text/html" id="friendsTemplate">
    <li>$data.name</li>
</script>

或者，你可以这样做：

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

【讨论】：