2013-04-09 25 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.