Applying a % style binding with knockout via function not working

Question

I want to set the width of a div equal to a percentage calculated by a javascript method. I can get knockout to apply the style binding properly using this:

<div class="bar" data-bind="style: { width: '50%'}"></div>

but when I try to use a function to generate the output, it breaks:

<div class="bar" data-bind="style: { width: function(){return '50' + '%';}}"></div>

Answer 1

It looks like it won't take an anonymous function, but if you define the function as a named, method, I got it to work.

<script>
calcWidth = function(amt) {
  return amt + '%';
}
</script>

<div class="bar" data-bind="style: { width: calcWidth(50)}"></div>

Note: I only found this out by trial and error on knockout's interactive tutorial. I'm not sure if there are other factors that come into play here, but this was the best I was able to come up with.

Answer 2

This is working fine:

<div data-bind="style: { width: function() + '%' }"></div>

jsFiddle: http://jsfiddle.net/LkqTU/31377/

Answer 3

It turns out you can get it to work with an anonymous function, you just need to explicitly call that function:

<div data-bind="style: { width: function(){ return '50%'; }() }"></div>