CODEWITHSUNDEEP
asp.netasp.net-mvc-4knockout.js
espenk
espenk

Reputation: 585

knockout bind in style element

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>&nbsp;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?

Upvotes: 1

Views: 415

Answers (1)

RP Niemeyer
RP Niemeyer

Reputation: 114792

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

Upvotes: 2

Related Questions