4

我正在使用 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元素只会显示是否viewModel.mentions.loaded为假并viewModel.mentions.data包含一些项目，而第二个元素会li显示直到viewModel.mentions.loaded被设置为假，但两个项目始终显示。我究竟做错了什么？

4

2 回答 2

5

当您的列表中有这些静态项目时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/

于 2012-07-20T20:08:55.417 回答
2

我在使用visible绑定时遇到了类似的意外行为问题，请尝试以下操作：

var ViewModel = {
  mentions: {
    loaded: ko.observable(),
    data: ko.observableArray(),
    status: ko.computed(function () {
      if (loaded() && data().length < 1)
        return 'No Mentions';

      else
        return 'Loading...';
    });
}

使用以下命令更新您的视图<span>：

<span data-bind="text: status, visible: loaded"></span>
于 2012-07-20T20:12:14.060 回答