Knockout.jsでセレクトボックスを作る

ゴール

初期状態では30人を選択している。

選択するごとに上から10,30,100,-1の値が取得できること

ソースコード

class SelectViewModel
  constructor: ->
    @log = ko.computed =>
      console.log(@selected_options()[0])

  display_nums: ko.observableArray([
    {text: '10人', value: 10},
    {text: '30人', value: 30},
    {text: '100人', value: 100},
    {text: 'すべて', value: -1}
  ])
  selected_options: ko.observableArray([30])

%select{data: {bind: "options: display_nums, optionsText: 'text', optionsValue: 'value', selectedOptions: selected_options"}}

このSelectViewModelをバインドし、セレクトボックスを操作するとconsole.logにそれぞれの値が表示される

ポイントとしては、selectedOptionsに渡す初期状態及び値を変更されるプロパティ（selected_optionsのこと）は、最初に選択されるvalueを渡すこと←ちょい嵌った...

雑談

selectedOptionsって書き方、どちらかと言うとselectedValueな気がする....