selectbox avec optgroup avec knockoutJS

Question

je dois afficher selectbox des articles goupe par leurs catégories comme ceci:

Mon modèle C# est:

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(); } 
    } 
} 

mon modèle Javascript est:

<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> 

mon code HTML est

<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> 

Dans tous les navigateurs IE wxcept J'arrive à ce que je avais besoin, mais dans IE, il apparaît comme ceci: Toute suggestion comment résoudre ce problème dans IE?

Answer 1

Vous devez utiliser la liaison de modèle, car IE supprime les commentaires de <select>.

définition du modèle:

<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> 

définition Sélectionnez:

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

Et vous devez ajouter ce code dans votre modèle javascript:

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