knockout.js - 空の選択を設定する

Question

knockout.jsを使用して<select/>ボックスにデータを入力して管理しようとしています。私は初期値を空にしたいと思います。

しかし、管理された値を強制的にnullにするのは問題ありません。例えば

、this fiddle考える：

HTML：

<select data-bind="options: myOptions, value: myValue"></select> aka 
<span data-bind="text: myValue"></span> 

<div> 
    <button data-bind="click: setMyValue(null)">clear the selection</button> 
    <button data-bind="click: setMyValue('one')">select "one"</button> 
    <button data-bind="click: setMyValue('four')">select "four"</button> 
</div> 
<ul data-bind="foreach: log"> 
    <li>message: <span data-bind="text: message"></span></li> 
</ul> 

JS：

function Model() { 
    var self = this; 
    self.myOptions = ['one', 'two', 'three', 'four']; 
    self.myValue = ko.observable(); 
    self.setMyValue = function (val) { 
     return function(){ 
      this.log.push({ 
       message: "ok, trying to set value as " + val 
      }); 
      self.myValue(val); 
     }; 
    }; 
    self.log = ko.observableArray([]); 
} 
var model = new Model(); 
ko.applyBindings(model); 

select "one"とselect "four"ボタンがmyValue()の更新を強制的に選択を変更する作業を。ただし、選択ボタンのクリアは機能しません。選択はmyValue(null)、which is what I thought was the proper way to do itでクリアされません。

私は間違っていますか？

Answer 1

optionsCaptionバインディングセットが必要です。

<select data-bind="options: myOptions, value: myValue, optionsCaption: 'select...'"></select> 

Updated Fiddle