2012-07-02 4 views
3

<select> 요소에서 선택을 지울 필요가 있습니다. 나는 이미 Knockoutjs clear selected value in combobox과 같은 게시물을 읽고 허용 된 답변을 시도했지만 그 해결책은 작동하지 않는 것 같습니다. 대답은 수락 되었기 때문에 Knockout 2에서 변경된 사항이 있는지 알 수 없습니다.Knockout.js : 선택 요소에서 선택 지우기

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());​ 

clearSelectedStationnull에, 바운드 뷰 모델 속성을 설정해야 호출이 공백으로 표시하고 확대 바운드 <select> 요소로 UI에 반영되어야한다 : 여기

는 예를 들어보기 모델의 강조 표시된 항목을 표시하지 않는 옵션 목록 그러나, 내가 눈치 챘을 바운드 값을 속성 ( selectedStation) 옵션 ( stations)의 배열에 설정하려고하면 바인딩이 무시 될 것으로 보인다. 내가가없는 경우 빈 값으로 옵션 배열을 "오염"하고 싶지 않은 http://jsfiddle.net/sellmeadog/Su8Zq/1/

:

이 바이올린

내가 무슨 말을하는지 보여줍니다. 링크 된 게시물의 솔루션을 얻는 방법을 알고 싶습니다.

답변

8

"선택되지 않은"값에 대해 optionsCaption 추가 바인딩을 사용하는 것이 좋습니다. 사용하기 위해 설정해야하지만 " "으로 설정할 수 있습니다.

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

샘플 : http://jsfiddle.net/rniemeyer/Su8Zq/3/

+0

을 할 필요가 없습니다 공간을 포함한다; 이 경우 사용자의 경우 중요하지 않을 수 있지만 Select2는 빈 옵션을 공백이 포함 된 자체 자리 표시 자로 바꿉니다. – Matus

2

그냥 같이,에 'optionsCaption'를 추가

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

업데이트 바이올린 : 그것은 또한 빈 문자열이 될 수 http://jsfiddle.net/Su8Zq/2/