dropdown dropdown

Question

Je n'arrive pas à obtenir l'élément sélectionné d'une liste déroulante liée. Lorsque je choisis quelque chose dans la liste déroulante, je voudrais obtenir le texte de la sélection, pas la valeur. Je suis très nouveau à KO et essayant de maîtriser cela. J'ai créé un violon pour ça.

http://jsfiddle.net/voam/FjRxn/

Answer 1

changement

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', value: selectedGroup, optionsCaption: 'Choose...'"></select> 

Pour:

<select data-bind="options: availableGroups, optionsText: 'Name', value: selectedGroup, optionsCaption: 'Choose...'"></select> 

Answer 2

Pour votre question initiale @ réponse de Pete est juste, mais puisque vous devez préserver GroupId que la valeur que vous pourriez faire this (modified fiddle) . La propriété selectedGroup a été renommée selectedGroupId.

Ensuite, une nouvelle calculée observable selectedGroup a été définie en fonction de la selectedGroupId:

self.selectedGroup = ko.computed(function() { 
    for (var i = 0; i < groups.length; i++) { 
    if (groups[i].GroupId == self.selectedGroupId()) 
     return groups[i]; 
    } 
    return null; 
}); 

De plus, le var self = this a été défini

Answer 3

Vous pouvez également utiliser la fonction abonnez-vous sur votre selectedGroup observable. J'ai également créé un autre observable comme "selectedGroupId".

En cas s'abonner i attribuer une valeur de GroupId à nouveau observable "selectedGroupId"

self.selectedGroup.subscribe(function(item) 
    { 
      debugger; 
      self.selectedGroupId(item.GroupId); 
      return item.Name; 
     }); 

S'il vous plaît voir mis à jour Fiddle here

Answer 4

Je voulais juste poster une solution que je l'ai utilisé récemment pour résoudre ce problème. Il utilise des gestionnaires de liaison (valueAppendText et textFromOption) et ajoute une observable à l'observable qui est suivie par le menu déroulant. Cette solution n'est pas complète, mais démontre l'idée de ne pas utiliser l'ajout d'un calcul pour obtenir le texte déroulant. Cette solution utilise également jQuery, qui peut être supprimé, mais puisque j'utilise jQuery dans mes projets (surtout), je l'ai laissé. Le lien jsFiddle ci-dessous montre la fonctionnalité.

Fiddle: http://jsfiddle.net/FjRxn/65/

Balisage:

<select data-bind="options: availableGroups, optionsText: 'Name', optionsValue: 'GroupId', valueAppendText: selectedGroup, optionsCaption: 'Choose...'"></select> 

<p> 
    I am visible 
    You have chosen <span data-bind="textFromOption: selectedGroup"></span> 
    <div> 
     Group Id: <span data-bind="text: selectedGroup"></span> 
    </div> 
</p> 

Handlers Reliure:

ko.bindingHandlers.valueAppendText = { 
    init: function(element, valueAccessor, allBindingsAccessor, context) { 
     var $element, newValueAccessor, observable, setText; 

     observable = valueAccessor(); 
     observable.selectedOptionText = ko.observable(null); 
     newValueAccessor = function() { 
     return observable; 
     }; 
     $element = $(element); 
     setText = function() { 
     return observable.selectedOptionText($element.find("option:selected").text()); 
     }; 
     setTimeout(setText, 5); 
     $element.change(function() { 
     return setText(); 
     }); 
     return ko.bindingHandlers.value.init(element, newValueAccessor, allBindingsAccessor, context); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, context) { 
     return ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor, context); 
    } 
    }; 

    ko.bindingHandlers.textFromOption = { 
    update: function(element, valueAccessor, allBindingsAccessor, context) { 
     var newValueAccessor, observable; 

     observable = valueAccessor(); 
     newValueAccessor = function() { 
     if (ko.isObservable(observable.selectedOptionText)) { 
      return observable.selectedOptionText(); 
     } 
     return observable(); 
     }; 
     return ko.bindingHandlers.text.update(element, newValueAccessor, allBindingsAccessor, context); 
    } 
    }; 

Answer 5

La solution la plus simple serait de supprimer le optionsValue de liaison de votre élément. Il va ensuite stocker l'ensemble de l'objet dans l'observable et vous pouvez accéder à toutes vos propriétés.

jsfiddle

<select data-bind="options: availableGroups, optionsText: 'Name', 
value: selectedGroup, optionsCaption: 'Choose...'"></select> 

Answer 6

Personnellement, j'utiliser la réponse de @ pomber, avec une petite édition.Je n'aime pas utiliser for-loop dans les observables calculés.

Fiddle