knock-out lier le texte de l'étiquette de liste déroulante valeur de l'option sélectionnée texte

J'ai été à la recherche pour des fonctionnalités similaires dans quelque chose, j'ai été jeter ensemble hier et ne l'a pas trouvé, alors j'ai fini par en changeant simplement ce que je était de stocker de la valeur des attributs. Parfois, c'est la solution la plus simple.

Voici un moyen rapide et genre de laid solution au problème à l'aide de jQuery:

HTML

<div data-bind="text: dropdownText"></div>
<select data-bind="value: dropdownValue" id="dropdown">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

function ViewModel() {
    var self = this;
    this.dropdownValue = ko.observable();
    this.dropdownText = ko.computed(function() {
        return $("#dropdown option[value='" + self.dropdownValue() + "']").text();
    });
};

ko.applyBindings(new ViewModel());

Live exemple: http://jsfiddle.net/5PkBF/

Si vous avez été à la recherche pour ce faire, dans plusieurs endroits, il serait probablement préférable d'écrire une liaison personnalisée, par exemple:

HTML

<div data-bind="text: dropdownValue"></div>
<select data-bind="selectedText: dropdownValue">
  <option value="1">Value1</option>
  <option value="2">Value2</option>
</select>

JS

ko.bindingHandlers.selectedText = {
    init: function(element, valueAccessor) {
        var value = valueAccessor();
        value($("option:selected", element).text());

        $(element).change(function() {
            value($("option:selected", this).text());
        });
    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $("option", element).filter(function(i, el) { return $(el).text() === value; }).prop("selected", "selected");
    }
};

function ViewModel() {
    this.dropdownValue = ko.observable();
};

ko.applyBindings(new ViewModel());

Live exemple: http://jsfiddle.net/5PkBF/1/

OriginalL'auteur Jonathan S.