Can you add knockoutjs style binding specifying property+value together?

Question

I have a question regarding the style binding. Is it possible to generate the whole style binding text? So the property and value parts together? For example:

    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());

The the simple way is to do like this:

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

Is it possible to do it a way like this( I tried, it did not work):

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

If yes, how? If not, why not? One can do a text binding to a html style element, but I was wondering if you can do it somewhat similar, what I am proposing? Thanks!

Answer 1

The main parameter of the style binding is not a string, but

You should pass a JavaScript object in which the property names correspond to style names, and the values correspond to the style values you wish to apply.

So your fontSizeCSS computed should return an object and not a string, and it will work fine:

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

Demo JSFiddle.