knockout.js - モデルの複雑なプロパティを表示するための KnockoutJs マッピング

Question

私はノックアウトが初めてで、単純なシナリオだと思っていたことを試してみましたが、うまくいきません。選択が変更されたときに 2 つの入力のどちらも変更されず、選択リストが selectedFormat に初期化されません。

HTML:

<input type="text" data-bind="value: selectedFormat.id" />
<input type="text" data-bind="enable: selectedFormat.fields()[0].enabled" />

<select data-bind="options: formats, optionsText: 'name', value: selectedFormat" />

JS:

var data = {
    formats: [
        { id: 1, name: 'Format 1', fields: [
            { id: 1, enabled: true }, 
            ]}, 
        { id: 2, name: 'Format 2', fields: [
            { id: 1, enabled: false }, 
            ]}
        ], 
    selectedFormat: 
        { id: 2, name: 'Format 2', fields: [
            { id: 1, enabled: false }, 
            ]}
    }

var vm = ko.mapping.fromJS(data);

ko.applyBindings(vm);

http://jsfiddle.net/paulbau/ZnqNN/1/