Knockout.jsにしろ、それ以外のJavaScriptのMVVMにしろ、bind前にViewがチラッと見えてしまうことがありますね。あれをなんとかしたいなーと思っていたので、その解決方法についてです。

アプローチ1: ViewModelがbindされるまで隠す(View単位)

.ko-hiddenというcssのクラスを作って、隠してしまう作戦です。

.ko-hidden {
  display: none;
}

これを、該当するViewに当てておきます。

.ko-hidden data-bind="with: fooViewModel"

これに対して、bindingし終えたら表示するというものです。

window.load ->
  ko.applyBindings(app_view_model)
  $('.ko-hidden').removeClass('ko-hidden')

上記の方法だと、いきなりバッと表示されてしまうので、フェードインで表示したい場合は、こう。

window.load ->
  ko.applyBindings(app_view_model)
  $('.ko-hidden').fadeIn().removeClass('ko-hidden')

アプローチ2: ViewModelがbindされるまで隠す(全体)

bindingが終わるまで、body自体を非表示にするという方法。

cssは同じ。

.ko-hidden {
  display: none;
}

これをbodyタグにあてます。

body.ko-hidden

そして、bindingし終えたら表示。

window.load ->
  ko.applyBindings(app_view_model)
  $('body').removeClass('ko-hidden')

簡単なのは全体を隠すほうだけれど、複雑な条件に対応できるのはView単位に対応するほうかなと思う。
私はView単位で対応する方法をとった。