2012-07-02 3 views
3

Мне нужно очистить выделение от элемента <select>. Я уже читал такие сообщения, как Knockoutjs clear selected value in combobox, и попробовал принятые ответы, но эти решения, похоже, не работают (не знаю, изменилось ли что-то в нокауте 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());​ 

Когда clearSelectedStation вызывается, связанный вид модели свойство должно быть установлено в null, и это должно быть отражено в пользовательском интерфейсе с помощью связанного <select> элемента появляется пустым и расширение список опций, не показывающий выделенных элементов. Однако я замечаю, что если вы попытаетесь установить свойство bound value (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/