通常、必要なのは「オプション」を配列にすることであり、「値」バインディングを使用して、ビューモデルを選択ボックスと同期させて監視できるようにします。その後、ユーザーが別のオプションを選択すると、'value' バインディングに配置した同じオブザーバブルから更新された値を取得できます。
イベント ハンドラーについては、最初の 'data' 引数は koGrid 行の "viewmodel" になり、そこからこの行の VM データに簡単にアクセスできます (例: data.name()
)。
簡単な例を次に示します: (JSFiddle はこちら: http://jsfiddle.net/qjNUQ/1/ )
HTML:
<script type="text/html" id="tmpl">
<div data-bind="kgCell: $cell">
<select data-mini="true" data-bind="options: $root.availableTypes,
value: $cellValue,
optionsCaption: 'Selecione...',
event: { change: $root.typeChanged }"></select>
</div>
</script>
<div id="grid" data-bind="koGrid: {
data: items,
columnDefs:
[{field: 'name', width: 120},
{field: 'type', cellTemplate: 'tmpl', width: 120}],
autogenerateColumns: false
}"></div>
JS:
function Item(item)
{
var self = this;
this.name = ko.observable(item.name);
this.type = ko.observable(item.type);
}
function VM() {
var self=this;
this.availableTypes = ['weapon', 'armour', 'food', 'document', 'potion'];
this.items = ko.observableArray([
new Item({ name: 'sword', type: 'weapon' }),
new Item({ name: 'city map', type: 'document' }),
new Item({ name: 'healing cider', type: 'potion' }),
new Item({ name: 'new item' })
]);
this.typeChanged = function(itemRow, event) {
console.log( 'type changed to ', itemRow.type(),
', for item: ', itemRow.name() );
}
};
ko.applyBindings( new VM() );