选择框与knockoutJS

Question

我需要他们的类别，如这显示项目党团的选择框OPTGROUP：

我的C＃模式是：

public class SandboxModel 
{ 
    public SandboxModel() 
    { 
     PubCodes = new List<SelectListItem> 
         { 
     new SelectListItem { Value = 0, Text = "Agora", Type = 1 }, 
     new SelectListItem { Value = 96, Text = "AGF - Agora Financial", Type = 2 }, 
     new SelectListItem { Value = 81, Text = "CSP - Common Sense Publishing", Type = 2 }, 
     new SelectListItem { Value = 136, Text = "HSI - Health Sciences Institute", Type = 2 }, 
     new SelectListItem { Value = 0, Text = "Non-Agora", Type = 1 }, 
     new SelectListItem { Value = 135, Text = "ANG - Angel Publishing", Type = 2 }, 
     new SelectListItem { Value = 123, Text = "APF - Apocalypse Freedom", Type = 2 }, 
     new SelectListItem { Value = 93, Text = "ASI - Asset Strategies International", Type = 2 }, 
         }; 

    } 

    public IList<SelectListItem> PubCodes { get; private set; } 

    public SelectListItem PubCode 
    { 
     get { return PubCodes.Last(); } 
    } 
} 

我的JavaScript模式是：

<script type="text/javascript"> 
    @{ var serializer = new JavaScriptSerializer(); } 
    function ViewModel() { 
     var self = this; 

     // Server Model Properties 
     self.SelectedPubCode = ko.observable(@Model.PubCode.Value); 

     // Select lists 
     self.PubCodes = ko.observableArray(@Html.Raw(serializer.Serialize(Model.PubCodes))); 
     }; 
    }; 
    ko.applyBindings(new ViewModel()); 
</script> 

我的Html是

<select data-bind="foreach:PubCodes, optionsCaption: 'Please Select', value:SelectedPubCode"> 
    <!-- ko if: Type === 1 --> 
    <optgroup label="__________"></optgroup> 
    <optgroup data-bind="attr: {label: Text}"></optgroup> 
    <!-- /ko --> 
    <!-- ko if: Type !== 1 --> 
    <option data-bind="text: Text, value: Value"></option> 
    <!-- /ko --> 
</select> 

在所有浏览器wxcept IE我达到了我所需要的，但在IE中它看起来像这样： 如何解决在IE中的任何建议？

Answer 1

您需要使用模板绑定，因为IE会删除<select>中的注释。

模板定义：

<script type="text/html" id="group-separator-template"> 
    <optgroup label="__________"></optgroup> 
    <optgroup data-bind="attr: {label: Text}"></optgroup> 
</script> 
<script type="text/html" id="element-template"> 
    <option data-bind="text: Text, value: Value"></option> 
</script> 

选择定义：

<select data-bind="template: { name: pubCodeTemplate, foreach: PubCodes } , optionsCaption: 'Please Select', value:SelectedPubCode"> 
    </select> 

而你需要将此代码添加到您的JavaScript型号：

self.pubCodeTemplate = function (pubCode) { 
     return pubCode.Type !== 1 ? 'element-template' : 'group-separator-template'; 
};