knockout bind in style element - asp.net

Question

This is my first project testing out knockout.js with .net mvc. So far, looks cool.
I have this view:
<div class="container">
<div data-bind="foreach: viewModel.items">
<div class="well well-small">
<div class="row">
<div class="span9">
<h3><span data-bind="text: Name"></span><small> Registered by <span data-bind="text: RegisteredBy"></span>at <span data-bind="text: Registered"></span></small></h3>
<p><span data-bind="text: Description"></span></p>
</div>
</div>
<div class="row">
<div class="span6">
<div class="progress">
<div class="bar" data-bind="style: {width: progress }"></div>
</div>
</div>
<div class="span3">
<span data-bind="text: progress"></span>% done <a class="btn btn-mini" href="#"><i class="icon-plus"></i>add 10%</a>
</div>
</div>
</div>
</div>
Then I do this:
<script>
$(document).ready(function () {
var initialData = #(Html.Raw(Json.Encode(Model)))
viewModel = { items: ko.observable(initialData) };
ko.applyBindings(viewModel);
});
All this works, except where I try to bind like this data-bind="style: {width: progress }"
Im positive that the progress field are working since I get the value there in the span below.
Any idea?

Answer 1

You would need to specify a unit. Something like {width: progress() + 'px'} or create a computed observable that returns it with the units.