Knockout.js KnockoutJS-显示加载和无数据消息

我正在使用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>

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

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

未提及
正在加载

var viewModel={
提到：{
已加载：可观察到（错误），
数据：ko.observableArray（）
}
}
函数loadData（）{
$.post（操作、功能（结果）{
viewModel.indications.data=ko.mapping.fromJS（结果）；
viewModel.References.loaded（true）；
应用绑定（视图模型）；
});   
} 
应用绑定（视图模型）；
loadData（）；

---

我希望第一个

li

元素仅在

viewModel.indications.loaded

为false且

viewModel.indications.data

包含一些项目时才会显示，第二个

li

元素将一直显示，直到

viewModel.indications.loaded

设置为false，但这两个项目都会一直显示。我做错了什么？

当您的列表中有这些静态项时，它们实际上不会被绑定，因为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>

未提及
正在加载

---

示例：

我在使用

可见

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

<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>

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

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

var ViewModel={
提到：{
已加载：ko.observable（），
数据：ko.observearray（），
状态：ko.computed（函数（）{
如果（已加载（）&数据（）。长度<1）
返回“未提及”；
其他的
返回“正在加载…”；
});
}

使用

更新视图：

我在使用knockout绑定时遇到问题！你尝试过

==false

吗？刚刚尝试过，结果是一样的。这就像knockoutjs在绑定时甚至不接触现有的

li

元素。奇怪。因为我有类似的问题，我通常会在视图模型中添加

status

属性并进行绑定在ui中，它是一个

；实际的消息是在一个

ko.computable

中确定的。是的，我认为这是最好的方法，并且已经沿着这条路径开始了，但是无论出于什么原因，当我填充数据数组时，ko并没有更新绑定。我正在做

ko.mapping.fromJS（result，viewModel.indications.data）

什么都没有发生。我更新了小提琴。如果映射插件没有初始化

提到.data

，那么你需要像调用

ko.mapping.fromJS（result，{}，viewModel.antieds.data）那样调用它；

所以我发现我使用了错误的fromJS语法。我将它改为使用

ko.mapping.fromJS（result，{}，viewModel.attentions.data）；

一切正常。谢谢！