3

<select>要素からの選択をクリアする必要があります。Knockoutjs がコンボボックスで選択された値をクリアするなどの投稿を既に読み、受け入れられた回答を試しましたが、それらの解決策は機能していないようです(回答が受け入れられてから Knockout 2 で何かが変更されたかどうかわかりませんか?) .

ビューモデルの例を次に示します。

var ClearSelectionViewModel = function () {
    var self = this;

    self.station = ko.observable();

    self.selectedStation = ko.observable();
    self.selectedStation.subscribe(function (value) {
        self.station(value);
    });

    self.stations = ko.observableArray(['CLT', 'PHL', 'PHX', 'PIT']);

    self.clearSelectedStation = function () {
        self.selectedStation(null);
    };
};

ko.applyBindings(new ClearSelectionViewModel());​

がclearSelectedStation呼び出されると、バインドされたビュー モデル プロパティを に設定する必要があります。これは、バインドされた要素が空白で表示され、オプションのリストが展開されて強調表示された項目が表示nullされないことによって、UI に反映される必要があります。ただし、バインドされた値のプロパティ ( ) をオプションの配列 ( ) にないもの<select>に設定しようとすると、バインディングが無視されるように見えることに気付きました。selectedStationstations

このフィドルは、私が話していることを示しています: http://jsfiddle.net/sellmeadog/Su8Zq/1/

必要がなければ、オプション配列を空白の値で「汚染」したくありません。リンクされた投稿の解決策を機能させる方法を知りたいです。

4

2 に答える 2

8

1 つのオプションはoptionsCaption、「選択されていない」値に追加のバインディングを使用することです。使用するには何かに設定する必要がありますが、に設定することもできます" "。

<select data-bind="optionsCaption: ' ', options: stations, value: selectedStation"></select>

サンプル: http://jsfiddle.net/rniemeyer/Su8Zq/3/

于 2012-07-02T20:11:53.533 に答える
2

次のように「optionsCaption」を追加するだけです。

<select data-bind="options: stations, value: selectedStation, optionsCaption: '-- SELECT --'"></select>

更新されたフィドル: http://jsfiddle.net/Su8Zq/2/

于 2012-07-02T20:12:03.730 に答える