以下のようなソースコードがある。
<!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が読み終わった後に実行しなければならないことになる。