javascript - KnockoutJS：返回数组为空时显示消息

Question

如果返回的任务数组为空，我想显示一条消息。我用这个：

<span data-bind="visible: tasksArr().length == 0">
   There are no tasks yet.
</span>

但它不能正常工作。当我加载页面时，该消息会在内容加载到数组之前显示一秒钟，因为tasksArr在请求完成获取内容之前声明了该消息。有没有更简单的方法可以在加载完成后显示它而不诉诸额外的 observable？

Answer 1

正如您在这个小提琴中看到的那样， obervableArray 的默认值是一个空数组。所以未初始化的 obervableArray 和空的 obervableArray 之间没有区别。

有2个工作区：

声明更多的 observables ：

function vm() {
    var self = this;
    self.tasksArr = ko.observableArray([]);
    self.initilized = ko.observable(false);
    self.canSee = ko.computed(function(){
       var a = self.tasksArr().length;
       return self.initilized() && a;
    }); 
    self.load = function () {
        setTimeout(function () {
            for (var i = 0; i < 100; i++) {
                self.tasksArr.push(i);
            }
            self.initilized(true);
        }, 1000);
    }();
}

ko.applyBindings(new vm());

见小提琴

您也可以延迟绑定

function vm() {
    var self = this;
    self.tasksArr = ko.observableArray();

    self.load = function () {
        setTimeout(function () {
            /*for (var i = 0; i < 100; i++) {
                self.tasksArr.push(i);
            }*/
            ko.applyBindings(x);
        }, 1000);

    }();
}

var x = new vm();

见小提琴

我希望它有所帮助。

Answer 2

默认情况下隐藏跨度（显示：无；）。这样，消息将在页面加载时隐藏，并且仅在 tasksArr 确实为空时才可见。