2

返されたタスクの配列が空の場合にメッセージを表示したいと思います。私はこれを使用しました：

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

しかし、それは正しく動作しません。tasksArrページをロードすると、リクエストがコンテンツのフェッチを完了する前に宣言されているため、コンテンツが配列にロードされる前にメッセージが1秒間表示されます。余分なオブザーバブルに頼らずに、ロードが完了した後にそれを表示させる簡単な方法はありますか?

4

2 に答える 2

0

このフィドルでわかるように、obervableArray のデフォルト値は空の配列です。したがって、初期化されていない obervableArray と空の obervableArray の間に違いはありません。

2 つの回避策があります。

より多くのオブザーバブルを宣言する:

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

フィドルを見る

お役に立てば幸いです。

于 2013-09-17T09:01:14.673 に答える
-1

デフォルトでスパンを非表示にします (display:none;)。このようにして、メッセージはページの読み込み時に非表示になり、taskArr が実際に空の場合にのみ表示されます。

于 2013-09-17T08:29:05.673 に答える