1

以下のテンプレートを使用して、行のセルを選択オプションとして設定することに成功しました。

<div data-bind="kgCell: $cell"> 
<select data-mini="true" data-bind="options: $cellValue, event : { change : function(data, event) { mymodel.gridCallBack(data, event, $cell, $cellValue); } } "> <option value="undefined">Selecione...</option> 
</select> 
</div>

しかし、選択ボックスの値を見つけることができませんでした。特定のセルの行ごとの選択の値バインディングを知ることができるように設定する方法はありますか?

アウグスト

4

1 に答える 1

2

通常、必要なのは「オプション」を配列にすることであり、「値」バインディングを使用して、ビューモデルを選択ボックスと同期させて監視できるようにします。その後、ユーザーが別のオプションを選択すると、'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() );​
于 2012-11-10T01:56:19.283 に答える