Edited at

Knockout.js の if, ifnot, visible バインディングが View に反映されるまで要素を非表示にする

More than 5 years have passed since last update.


CSS で一時的に非表示に。

/* for knockout.js */

*[data-bind^="visible"], *[data-bind^="if"] {
visibility: hidden;
}
body.visible *[data-bind^="visible"], body.visible *[data-bind^="if"] {
visibility: visible;
}


反映後に表示。

// view model bindings

var view = new ViewModel();
ko.applyBindings(view);
document.body.className += "visible";

更にエレガントな方法があれば教えて下さい!


[追記] エレガントな方法

<ul data-bind="foreach: items, visible: true" style="display: none">

<li data-bind="text: name"></li>
</ul>

Knockout.js でデータバインディングを行う一番外側の要素に、上記のように style, data-bind を指定すると、完了した時点で表示される。

<div data-bind="visible: false">読み込み中...</div>

逆にこのように書くと、データバインディングが行われるまでメッセージを表示させることも出来る。

参考