Knockout KoGrid：我如何使用網格行中的select選項？

Question

我已經成功地建立了一個細胞上的行是使用模板波紋管一個選擇選項：

<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> 

但我一直沒能找出選擇框的值。有沒有辦法設置一些東西，以便我能夠知道特定單元格的每行選擇的值綁定？

奧古斯托

Answer 1

通常你需要什麼是「選項」是一些數組，並使用「值」結合，讓您的視圖模型觀察到的同步與選擇框。 然後，當用戶選擇不同的選項時，您可以從您在「值」綁定中放入的相同可觀察值中獲取更新值。

至於事件處理程序 - 第一個'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());​