knockout.js で JavascriptをHTMLの外のファイルに書いたときの挙動の件

http://knockoutjs.com/

症状

下記のように javascript を書くと、html の閉じタグの直前に script タグを書かないと動かなかったりする。

hoge.js

var ViewModel = function(first, last) {
  this.firstName = ko.observable(first);
  this.lastName = ko.observable(last);

  this.fullName = ko.computed(function() {
    return this.firstName() + ' ' + this.lastName();
  }, this);
};

ko.applyBindings(new ViewModel('Planet', 'Earth'));

hoge.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tasks</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.js"></script>
    <script type="text/javascript" src="hoge.js"></script>
  </body>
</html>

修正

hoge.js

jQueryの場合、下記のようにすれば html の head 内に script タグ置いても動く。（閉じタグ前でも）

$(function() {
  var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
      return this.firstName() + ' ' + this.lastName();
    }, this);
  };

  ko.applyBindings(new ViewModel('Planet', 'Earth'));
});

hoge.html

<!DOCTYPE html>
<html>
  <head>
    <title>Tasks</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="knockout-2.1.0.js"></script>
    <script type="text/javascript" src="hoge.js"></script>
  </head>
  <body>
    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
  </body>
</html>