knockout.js con opzioniValore e valore

Question

C'è un modo per mantenere l'associazione value all'oggetto, ma avere la proprietà optionsValue nell'oggetto. A partire da ora se si specificano entrambi, la proprietà optionsValue che viene selezionata popolerà l'associazione value. Id piace mantenere l'oggetto intatto nell'osservabile, ma specificare quale valore deve essere impostato nel valore della lista di selezione. In questo modo un modulo di invio invierà il optionsValue che ho scelto.

@Html.DropDownListFor(q => q.DivisionId, new SelectList(Enumerable.Empty<string>()), new { data_bind="options: divisions, optionsText: 'Name', optionsValue: 'Id', value: division, optionsCaption: ' - '" }) 

function AddCrossPoolGameDialog() { 
    var self = this; 

    self.divisions = ko.observableArray([]); 
    self.division = ko.observable(); 

    self.awayDivisionTeams = ko.computed(function() { 
     var division = ko.utils.arrayFirst(self.divisions(), function(item) { 
      return self.division.Name() == item.Name; 
     }); 

     if (division) { 
      return division.DivisionTeamPools; 
     } 

     return []; 
    }); 
} 

Answer 1

Non è possibile ottenere sia i optionsValue e value attacchi per puntare a oggetti diversi, ma è possibile creare una soluzione semplice.

Per consentire al modulo di inviare un valore semplice, utilizzare optionsValue per indicare la proprietà dell'articolo associato che si desidera inviare con il modulo. Quindi assegnare il binding value a un osservabile. Infine, crea un computed per trovare e restituire automaticamente l'oggetto corretto quando il valore selezionato cambia.

binding Esempio:

<select data-bind="options: options, 
        optionsText: 'name', 
        optionsValue: 'id', 
        value: selectedOptionId"></select> 
<br/> 
<br/> 
Selection Option Object : <span data-bind="text: selectedOption"></span><br/> 
Selection Option name : <span data-bind="text: selectedOption().name"></span><br/> 
Selection Option id : <span data-bind="text: selectedOption().id"></span><br/> 

e vista modello:

var optionModel = function(id,name){ 
    var self = this; 
    self.id = id; 
    self.name = name; 
} 

var viewModel = function(){ 
    var self = this; 
    self.options = [ 
     new optionModel(1,"First"), 
     new optionModel(2,"Second") 
    ]; 
    self.selectedOptionId = ko.observable(self.options[0].id); 
    self.selectedOption = ko.computed(function(){ 
     return ko.utils.arrayFirst(self.options, function(item){ 
      return item.id === self.selectedOptionId(); 
     }); 
    }); 
} 

ko.applyBindings(new viewModel()); 

I've posted this to a jsFiddle here.

Spero che questo aiuti!