LoginSignup
24

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-01-25

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>

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24