0

上部に空白のオプションがある選択ドロップダウンを作成しようとしています。Chrome では問題なく動作しますが、IE では動作しません (IE 9 を使用)。このセクションに何か問題があります:

<!-- ko 'if': $data === 'Blank' -->
<option data-bind="text: '', value: $data"></option>
<!-- /ko -->
<!-- ko 'if': $data !== 'Blank' -->        
<option data-bind="text: $data, value: $data"></option>                
<!-- /ko --> 

http://jsfiddle.net/EYjyJ/2/

Chrome と同じように IE で動作させるにはどうすればよいですか? 私が達成しようとしていることを確認するには、jsFiddle で十分であることを願っています。必要に応じてさらに情報を追加します。ありがとうジェイソン

4

2 に答える 2

2

通常、vital 要素はバインディング名を文字列として渡さなくても機能します。

<!-- ko if: $data === 'Blank' -->
<option data-bind="text: '', value: $data"></option>
<!-- /ko -->
<!-- ko if: $data !== 'Blank' -->        
<option data-bind="text: $data, value: $data"></option>                
<!-- /ko --> 

しかし、より一般的には:

  • if'Blank'がデフォルト値を示している場合は、optionsCaptionbinding パラメータの使用を検討する必要があります。
  • そうでない場合は、バインディングではなく、ビュー モデルで解決するのが最善の方法です。

    function Option(text) {
        this.text = text;
        this.displayText = ko.computed(function () {
            return (this.text === 'Blank') ? '' : this.text;
        });
    }
    
    function ViewModel() {
        this.options = ko.utils.arrayMap(["Blank", "a", "b"], function (text) {
            return new Option(text);
        });
    }
    

    <option data-bind="text: displayText, value: text" />
    

    このようにして、仮想要素に依存しないクリーンなマークアップが完成します。

于 2013-10-16T16:01:54.277 に答える
1

結局、私はテンプレートソリューションに行きました:

<select id="jq-my-id" data-bind="template: { name: aoiTemplate, foreach: aoiTypes },value: aoi">
</select>

テンプレート:

<script type="text/html" id="group-aoi-template">
<optgroup data-bind="attr: {'label': $data}, foreach: getAoisFor($data)">        
    <option data-bind="text: $data.text, value: $data.code"></option>        
</optgroup>
</script>
<script type="text/html" id="blank-template">
    <option data-bind="text: '', value: $data.code"></option>
</script>

そして、私のビューモデルで正しいテンプレートを選択します:

self.aoiTemplate = function (aoiType) {
    return aoiType !== 'Blank' ? 'group-aoi-template' : 'blank-template';
};

optgroup が原因で、optionsCaption バインディングを使用できませんでした。

于 2013-10-17T08:13:32.050 に答える