knockout.js - ustawienie pustego zaznaczenia

Question

Próbuję użyć knockout.js do zapełnienia i zarządzania polem <select/>. Chciałbym, aby początkowa wartość była pusta.

Mam jednak problem z wymuszeniem wartości zarządzanej na wartość null w dowolnym momencie, nie mówiąc już o tym, że początkowo.

Na przykład, rozważmy 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); 

W select "one" i select "four" przyciski działają, aby zmienić wybór zmuszając aktualizację myValue(). Jednak wyczyszczenie przycisku wyboru nie działa. Wybór nie jest czyszczony przez myValue(null), which is what I thought was the proper way to do it.

Co robię źle?

Answer 1

Potrzebujesz zestawu powiązań optionsCaption.

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

Updated Fiddle