KnockoutJS - 显示加载和无数据消息答案

【问题标题】：KnockoutJS - show loading and no data messagesKnockoutJS - 显示加载和无数据消息
【发布时间】：2012-07-20 20:00:50
【问题描述】：

我正在使用 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 为 false 并且 viewModel.mentions.data 包含某些项目时才会显示，而第二个 li 将显示直到 viewModel.mentions.loaded 设置为 false，但是这两个项目始终显示。我做错了什么？

【问题讨论】：

我在淘汰赛绑定中使用! 时遇到了问题，您尝试过== false 吗？
刚刚做了，结果一样。这就像 knockoutjs 在进行绑定时甚至不会触及现有的 li 元素。
奇数。因为我遇到过类似的问题，所以我通常会在我的视图模型中添加一个 status 属性并将其绑定到 UI 中的 <span>；实际消息在ko.computable 中确定。

标签： knockout.js

【解决方案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/

【讨论】：

是的，我认为这将是最好的方法，并且已经开始沿着这条路走下去，但无论出于何种原因，当我填充数据数组时，KO 并没有更新绑定。我正在做ko.mapping.fromJS(result, viewModel.mentions.data);，但没有任何反应。
我更新了小提琴。如果mentions.data没有被映射插件初始化，那么你需要像ko.mapping.fromJS(result, {}, viewModel.mentions.data);一样调用它
所以我发现我使用了错误的 fromJS 语法。我将其更改为使用ko.mapping.fromJS(result, {}, viewModel.mentions.data);，一切都按预期工作。谢谢！

【解决方案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>

【讨论】：