KnockoutJS - 显示加载而没有数据消息

Question

我正在使用KnockoutJS并通过ajax加载我的视图模型.在加载完成之前,我想显示"正在加载..."消息,如果没有加载数据,我想显示"无结果".信息.我最初的尝试看起来像这样:

<ul data-bind="template: { name: 'mentions-template', foreach: mentions.data }">
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>


<script type="text/javascript">

    var viewModel = {
        mentions: {
            loaded: ko.observable(false),
            data: ko.observableArray()
        }
    }

    function loadData() {
       $.post(action, function(result) {
           viewModel.mentions.data = ko.mapping.fromJS(result);
           viewModel.mentions.loaded(true);
           ko.applyBindings(viewModel);
       });   
    } 

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

我期望第一个li元素只显示if是否viewModel.mentions.loaded为false并viewModel.mentions.data包含一些项目,并且第二个元素将显示li直到viewModel.mentions.loaded设置为false,但两个项目始终显示.我究竟做错了什么？

Answer 1

当你ul在列表中有这些静态项时,它们实际上并没有被绑定,因为Knockout只处理数组中的每个项.

实现目标的一种方法是:

<ul>
    <!-- ko template: { name: 'mentions-template', foreach: mentions.data } -->
    <!-- /ko -->
    <li data-bind="visible: mentions.loaded() && mentions.data().length < 1">No mentions</li>
    <li data-bind="visible: !mentions.loaded()">Loading...</li>
</ul>

示例:http://jsfiddle.net/rniemeyer/gw7bM/