Knockout.js: bedingt binden Titel Attribut von div

Question

Ich habe ein ViewModel auf meiner Seite, die die Daten für einen Überblick über die aktuellen Zustände einiger Geräte enthält. Bis auf ein Problem funktioniert alles gut: Ich muss das title-Attribut eines div-Elements abhängig von einem anderen Wert in meinem viewModel setzen.

Ich weiß, dass Sie im Grunde die Titel Attribut wie folgt aus (in der Daten-bind-Attribut des div-Tag) einstellen:

attr: { title: 'Some title' } 

die Erklärung oben verwenden „Einige Titel“ wird als Tooltip gesetzt, wenn schwebt das div. kann ich auch diese:

attr: { title: ConnectState.Value() } 

und gibt den richtigen Wert (einen ganzzahliger Wert) meine aktuellen Ansichtsmodell-Daten, so dass das Ansichtsmodell korrekt aufgefüllt wird.

Jetzt muss ich dies so etwas ändern:

attr: { 
    title: { 
    'Text 1': ConnectState.Value() == 0, 
    'Text 2': ConnectState.Value() == 1, 
    'Text 3': ConnectState.Value() == 2, 
    'Text 4': ConnectState.Value() == 3 
    } 
} 

Das obige Beispiel wird nur geben "[object Object]" als Titel (bzw. als Tooltip.). Wie kann ich das beheben? Vielen Dank im Voraus!

Answer 1

Definieren Sie ein ko.computed in Ihrem Viewmodel.

self.ConnectTitle = ko.computed(function() { 
    return 'Text ' + (self.ConnectState.Value() + 1).toString(); 
}); 

Dann: -

attr: { title: ConnectTitle } 

Als Ihre Bindung. Sie können den Inhalt der berechneten Funktion durch etwas ersetzen, das Ihren Anforderungen entspricht, wenn Ihr Text nur ein einfaches Beispiel wäre.

Answer 2

können Sie ternären Operator verwenden, etwa so:

attr: { 
    title: ConnectState.Value() == 0 ? 'Text 1' : 
     ConnectState.Value() == 1 ? 'Text 2' : 
     ConnectState.Value() == 2 ? 'Text 3' : 
     'Text 4' 
}