以下のようなソースコードがある。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Setup Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>


  <script>
  $(function(){
    var myViewModel = {
      course:'Knockout',
      author:'Ayad'
    };
    ko.applyBindings(myViewModel);
  });
  </script>
</head>
<body>
  <div>
    The course <u><span data-bind="text: course"></span></u> will be taught <body>
      <b><span data-bind="text: author"></span></b>
    </div>
    </body>
</body>

knockout jsのコードであるが、なぜ、knockout jsのコードを

$(function(){

}

で囲むのだろうか。
それは、エラーを検出しやすくするためである。例えば

ko.applyBindings(myViewModel);

のコードを以下のようにしてみよう

koo.applyBindings(myViewModel);

そうなると、Chromeの「表示」→「開発/管理」→「JavaScriptコンソール」で調べてみると、以下のようなエラーが出てくる

Uncaught ReferenceError: koo is not defined

では

$(function(){

}

この囲みをコメントアウトしてみると、このエラーが出たり、出なくてリロードができなかったりする。

このサイトによれば、

$(function(){

}

は、ドキュメントが読み終わった後に実行されるらしい。つまるところ、knockout jsのスクリプトはHTMLが読み終わった後に実行しなければならないことになる。