Knockout.jsを使ったajaxリスト切り替え表示

最近勉強し始めたばかりですが、Knockout.jsを使ってajaxで取得したリストを表示するサンプルです。
リストのソート順切り替えなんかに使えるかと。
※普段サーバーサイドばっかりでJavaScriptも詳しいわけではないので細かいところはツッコミなしでｗ

var sortVal = [デフォルト値]; // ソート順のパラメータ
var vm = undefined; // view model 

$(function(){
  // view model の作成
  function viewModel(){
    var self = this;
    self.list = ko.observableArray(); //リストなので observableArray のみ
  }
  
  vm = new viewModel(); // vm に newしてやる
  ko.applyBindings(vm);
  
  getList(sortVal); // リストの非同期処理
  
});

function getList(sortVal) {
  var sort = sortVal != undefined ? sortVal : [デフォルト値];
  
  $.ajax({
    type:'get',
    url:'/[URL]/' + sort,
    cache:false,
    success:function(data){
      vm.list(data); // vm.list()でbindしてやる
    }
  });
}

viewModel内で定義した 'ko.observableArray()'に非同期で取得したJson形式のリストを突っ込むだけです。

HTML側は

<div data-bind="forearch:list"> <!--  ko.observableArray()の変数名と同じ名前にする -->
<ul >
 <li><span data-bind="text:〇〇"></span></li> <!-- list.〇〇で取得出来る値 -->
</ul>
</div>

みたいな感じです。

あとは並び順を変更するたびに'getList([value])'と呼ぶだけで非同期でリストの中身を書き換えて表示します。

Knockout.js便利ですよね。

この辺りの技術を使ってサーバーサイドとは基本的にJSONでやりとりするような設計がいいかもと思ってます。
表示側に引っ張られてコードがスパゲッティになっちゃうとかよくあるし、APIサーバーにすればテストも楽になる…かも？