Puoi aggiungere il bind di stile knockoutjs specificando insieme il valore + della proprietà?

Question

Ho una domanda riguardante il binding di stile. È possibile generare l'intero testo vincolante di stile? Quindi le proprietà e le parti di valore insieme? Per esempio:

function ViewModel() { 
    this.fontSize = ko.observable(12); 

    this.fontSizeCSS = ko.computed(function() { 
     return "font-size: " + " " + this.fontSize() + "px"; 
    }, this); 

} 

// Activates knockout.js 
ko.applyBindings(new ViewModel()); 

Il il modo più semplice è quello di fare in questo modo:

<div data-bind="style: { fontSize: fontSize() + 'px'}"> 
    <p>Lorem ipsum</p> 
</div> 

E 'possibile farlo un modo come questo (ho provato, non ha funzionato):

<div data-bind="style: { fontSizeCSS() }"> 
    <p>Lorem ipsum</p> 
</div> 

Se sì, come? Se no, perché no? Si può fare un binding di testo con un elemento di stile html, ma mi chiedevo se è possibile farlo in qualche modo simile, cosa sto proponendo? Grazie!

Answer 1

Il parametro principale della style binding non è un string, ma

Si dovrebbe passare un JavaScript oggetto in cui i nomi delle proprietà corrispondono ai nomi di stile, ed i valori corrispondono ai valori di stile che si desidera applicare.

Così il vostro fontSizeCSS calcolato dovrebbe restituire un oggetto e non una stringa, e funzionerà bene:

this.fontSizeCSS = ko.computed(function() { 
     return {"fontSize": this.fontSize() + "px"}; 
}, this); 

Demo JSFiddle.