knockout.js - Knockout JS で観察可能な値を適切にモデル化/クリアするにはどうすればよいですか (テキスト領域フィールドが更新されません)。

Question

HTMLフォームのフィールドを表現してバインドするモデルをKOで作成しています。

デフォルトのページ名（テキストフォームフィールド値）を挿入するボタンをクリックしてから、他のフォームフィールド（すべてのテキストエリアフィールド）にクリア（空白文字列を挿入）できるという考えです。

テストする：

• 各フォーム フィールドに値を入力します
• [新しいページを追加] ボタンを押します
• 最初のフィールドにデフォルトのページ名の値を挿入します
• 私が予想するように、テキスト領域に空白の値を挿入しません

テキストエリアフィールドに関連する値を適切にバインド/クリアするには、どうすればよいですか?

function Page() {
    self = this;
    self.name = ko.observable("");
    self.HEADhtml = ko.observable("");
    self.HEADERhtml = ko.observable("");
    self.FOOTERhtml = ko.observable("");
    
    self.initialize = function()
    {
        self.name("New Page");
        self.HEADhtml("");
        self.HEADERhtml("");
        self.FOOTERhtml("");
    }
    
    self.save = function()
    {
        alert('Save Function Placeholder');
    }
}

function koScope()
{
    var self = this;
    
    self.currentpage = new Page();    
}

ko.applyBindings(new koScope());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div class="sidebar-block text-center">
    <button class="btn btn-block btn-success" data-bind="click: currentpage.initialize">Add New Page</button>
</div>
<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="pagename" class="col-sm-3 control-label">Page Name</label>
    <div class="col-sm-9">
      <input class="form-control" id="pagename" type="text" data-bind="value: currentpage.name">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML HEAD</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5"  data-bind = "text: currentpage.HEADhtml"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML HEADER</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5" data-bind = "text: currentpage.HEADERhtml"></textarea>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-3 control-label">HTML FOOTER</label>
    <div class="col-sm-9">
      <textarea class="form-control" rows="5" data-bind = "text: currentpage.FOOTERhtml"></textarea>
    </div>
  </div>
  <div class="form-group margin-none">
    <div class="col-sm-offset-3 col-sm-9">
      <button type="submit" class="btn btn-primary" data-bind = "click: currentpage.save">Save</button>
    </div>
  </div>
</form>