2013-04-09 63 views
3

我试图显示KoGrid单元格中使用自定义单元格模板的下拉列表,我没有ideea为什么它不工作,因为它应该。下拉列表不工作在一个Knockout KoGrid

我有一个工作下拉列表使用options, optionsText, optionsValue and optionsCaption和绑定工作,因为它应该的例子。但KoGrid中的类似下拉列表不显示任何元素。我的问题是我错过/做错了什么,我该如何解决这个问题?

链接的jsfiddle:http://jsfiddle.net/AxyWz/6/

HTML:

<p> 
    Working drop-down list: 
    <select data-bind="options: data, optionsText: 'name', optionsValue: 'id', optionsCaption: '-', value: selectedItemId"></select> 
</p> 

<p> 
    Drop-down list not working in KoGrid: 
    <div class="grid" data-bind="koGrid: gridOptions"></div> 
</p> 

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre> 

<script type="text/html" id="template"> 
    <select data-bind="options: $root.data, optionsText: 'name', optionsValue: 'id', optionsCaption: '-', value: $parent.entity[$data.field]"></select> 
</script> 

的Javascript:

function Item(id, name) { 
    this.id = ko.observable(id); 
    this.name = ko.observable(name); 
    this.parentId = ko.observable(); 
} 

function ViewModel() { 
    this.selectedItemId = ko.observable(); 

    this.data = ko.observableArray([ 
     new Item(1, 'aaa'), 
     new Item(2, 'sss'), 
     new Item(10, 'xxx'), 
     new Item(14, 'zzz') 
    ]); 

    this.gridOptions = { 
     data: this.data, 
     canSelectRows: false, 
     columnDefs: [ 
      { field: 'id', displayName: 'id' }, 
      { field: 'name', displayName: 'name' }, 
      { 
       field: 'parentId', displayName: 'parent', 
       cellTemplate: $.trim($('#template').html()) 
      }, 
     ] 
    }; 
} 

ko.applyBindings(new ViewModel()); 

回答

3

当你需要使用$userViewModel来访问你的 “$根” 一celltemplate内视图模型。

documentation

$ userViewModel:{{KO结合上下文}} //访问到您的视图模型,你用于实例化电网。

所以你需要写:

<script type="text/html" id="template"> 
    <select data-bind="options: $userViewModel.data, 
         optionsText: 'name', optionsValue: 'id', 
         optionsCaption: '-', value: $parent.entity[$data.field]"> 
    </select> 
</script> 

演示JSFiddle.

相关问题