淘汰赛不显示可观察数组？答案

【问题标题】：Knockout not displaying Observable Array?淘汰赛不显示可观察数组？
【发布时间】：2013-11-29 20:17:14
【问题描述】：

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

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

              {{each friends }}
                <li>${ name }</li>
                {{/each}}
            </ul>

        </script>
    <script type="text/javascript">
        function friend(name) {
            this.name = ko.observable(name);
        }
        var ViewModel = {
            firstName: ko.observable("Chandan"),
            lastName: ko.observable("Khatwani"),
            friends: ko.observableArray([new friend("Amit"), new friend("Altamash")])
        };

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

        ko.applyBindings(ViewModel);
    </script>

好友列表未呈现为列表

【问题讨论】：

您的浏览器控制台是否出现任何错误？您是否按照文档knockoutjs.com/documentation/… 中的说明引用了 jquery 和 jQuery.tmpl？否则你的代码应该可以工作：jsfiddle.net/U9QJh
我在查看文档后添加了 jquery.tmpl 文件。但不起作用
添加tmpl文件后，在第58行的knockout.js中出现javaruntime错误
我从未见过您用于 foreach 循环的语法。你用的是什么版本的KO？通常我不得不做 data-bind='foreach:friends'

标签： knockout.js

【解决方案1】：

除非您使用的是真正旧版本的 Knockout，否则您不需要引用 jQuery 和 Knockout 以外的任何内容。有两种解决方案，使用模板或不使用模板。

带模板您只需要以正确的方式使用template binding。您的代码应如下所示；

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

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

没有模板更简单的方法...

<ul data-bind="foreach: friends">
    <li data-bind="text: name"></li>
</ul>

【讨论】：