淘汰赛风格元素绑定

Question

这是我第一个使用.net mvc测试knockout.js的项目。到目前为止，看起来很酷。

我有这样的看法：

<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> 

那么我这样做：

<script> 
$(document).ready(function() { 
    var initialData = @(Html.Raw(Json.Encode(Model))) 
    viewModel = { items: ko.observable(initialData) }; 

    ko.applyBindings(viewModel); 

}); 

这一切工作，除非我尝试绑定这样的数据 - bind =“style：{width：progress}”

由于我在下面的跨度中获得了该值，因此我肯定进度字段正在工作。

有什么想法？

Answer 1

您需要指定一个单位。像{width: progress() + 'px'}或创建一个计算的观察值，它返回单位。