Bind mehrere Stile von einem berechneten Objekt

Question

ich einen berechneten Wert haben, der eine Verschmelzung von anderen berechneten Werte enthält, die ich dann zu meinem Element binden:

HTML

<td data-bind="text: displayNamePipeJob, attr: primaryStyling()"></td> 

JS

self.primaryStyling = window.ko.pureComputed(function() 
{ 
    return { 
     style: 'color: ' + self.primaryFontColor() + '; font-family: ' + self.fontFamily() 
    } 
}); 

Um die Hässlichkeit der Aufbau einer manuellen Zeichenfolge auf diese Weise zu vermeiden, gibt es so ich Weg style als eine Art von Objekt mit Eigenschaften, zum Beispiel zu bieten:

self.primaryStyling = window.ko.pureComputed(function() 
{ 
    return { 
     style: { 
      'color': self.primaryFontColor(), 
      'font-family:': self.fontFamily() 
     } 
    } 
}); 

Leider diese Ausgänge zu style="[object Object]".

Answer 1

Eines der Ziele von knockout ist es, Ihre Ansicht von Ihrem Modell zu trennen - die Rückgabe der gesamten Styling-Informationen direkt von Ihrem Modell ist daher möglicherweise nicht ganz korrekt.

Ich würde es nähern, wo das Modell effektiv Konfigurationsinformationen enthält, und die Ansicht macht davon Gebrauch. Handlich, hat Knockout ein style binding zu diesem Zweck:

<td data-bind="text: displayNamePipeJob, style: {color: primaryColor, fontFamily: fontFamily }"></td> 

Wenn die Werte in einer komplexeren Art und Weise berechnet werden, die Ihr Beispiel hier können Sie einzelne computed Funktionen für jedes Attribut style aufbauen können.