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

通常你想要的'选项'是一些数组，你使用'value'绑定来保持你的viewmodel可观察与selectbox同步。然后，当用户选择不同的选项时，您可以从放入“value”绑定的同一个observable中获取更新的值。

对于事件处理程序 - 第一个'data'参数将是koGrid行的“viewmodel”，从那里可以很容易地访问该行的VM数据（例如data.name()）。

这是一个简单的例子：（JSFiddle here：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() );

Knockout KoGrid：如何在网格行中使用select选项？

1 个答案: