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

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

至于事件处理程序 - 第一个“数据”参数将是 koGrid 行的“视图模型”，从那里很容易访问该行的 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 回答