javascript - knockout JS : Show message when the returned array is empty

Question

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

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

但它不能正常工作。当我加载页面时，消息会在内容加载到数组之前显示一秒钟，因为 tasksArr 是在请求​​完成获取内容之前声明的。有没有更简单的方法让它在加载完成后显示出来而无需借助额外的 Observable？

Answer 1

正如您在 this fiddle 中看到的那样obervableArray 的默认值是一个空数组。因此，未初始化的 obervableArray 和空的 obervableArray 之间没有区别。

有两种工作方式:

声明更多可观察对象:

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());

See fiddle

也可以延迟绑定(bind)

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();

See fiddle

希望对你有帮助。