1

次のように、カテゴリ別にアイテムの選択ボックスを表示する必要があります。 ここに画像の説明を入力してください

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

すべてのブラウザwxceptIEで必要なものに到達しますが、IEでは次のように表示されます。IEでそれ ここに画像の説明を入力してください を修正する方法についての提案はありますか？

4

1 に答える 1

4

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';
};
于 2012-10-10T11:01:11.600 に答える