Einen kombinierten optionsText in knockout.js setzen

Question

Ich möchte zwei Rückgabewerte in meinem OptionenText-Feld kombinieren, ich dachte, das wäre einfach, aber ich bin anscheinend falsch. Ich verwende auch einen Wert für das Optionsfeld außerhalb des normalen Ansichtsmodells. Hier ist das Original:

<select style="width: 180px" data-bind="visible: false, value: fields.person, options: $root.extra.personList, optionsText: 'FirstName', optionsValue: 'LastName' }, select2: {}"> 

Dies funktioniert gut, die First Person zeigt und setzt den Wert als Name.

Das nächste Stück wirft einen Fehler:

<select style="width: 180px" data-bind="visible: false, value: fields.person, options: $root.extra.personList, optionsText: function (item) { return item.FirstName() + '-' + item.LastName() }, optionsValue: 'LastName', select2: {}"> 

Uncaught Typeerror: Anwesen ‚Vorname‘ von Objekt # ist nicht eine Funktion

Answer 1

Bist du sicher, Vorname und Nachname sind Observablen? Wenn Sie nicht sicher sind, versuchen Sie dies:

optionsText: function(item) { return ko.unwrap(item.FirstName) + '-' + ko.unwrap(item.LastName); } 

Oder noch besser, ein in Ihrem Ansichtsmodell berechnet erstellen:

self.FullName = function() { 
    return ko.unwrap(self.FirstName) + '-' + ko.unwrap(self.LastName); 
}; 

Und:

optionsText: 'FullName' 

Answer 2

wie optionsText funktioniert, ist es aussieht für die Eigenschaft 'Vorname' im Optionsfeld, an das gebunden ist. Wenn also Ihr Extra-Person-Array einen 'FirstName' und einen 'LastName' hat, können Sie eine berechnete Eigenschaft auf den vollen Namen erweitern.

function ViewModel(){ 
    var self = this; 
    self.peopleList = ko.observableArray(); 
} 
function Person(f, l){ 
    var self = this; 
    self.FirstName = ko.obserable(f); 
    self.LastName = ko.obserable(l); 
    self.FullName = ko.computed(function(){ 
     return self.FirstName() + ' ' + self.LastName(); 
    }); 
} 

Wenn sie nicht Observablen Sie nicht wollen, zu rufen sie [was() tut], es wäre in diesem Fall hätte ich nur eine Funktion Leben auf dem View-Modell, das sie zusammen bringt, die Sie anrufen von der Bindung.