12

我想将 div 的宽度设置为通过 javascript 方法计算的百分比。我可以使用以下方法正确应用样式绑定：

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

但是当我尝试使用函数来生成输出时，它会中断：

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

5 回答 5

5

事实证明，您可以让它与匿名函数一起使用，您只需要显式调用该函数：

<div data-bind="style: { width: function(){ return '50%'; }() }"></div>
于 2013-09-20T12:52:48.270 回答
3

看起来它不需要匿名函数，但如果你将函数定义为命名方法，我让它工作。

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

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

注意： 我只是在淘汰赛的交互式教程中通过反复试验才发现这一点。我不确定这里是否还有其他因素在起作用，但这是我能想到的最好的。

于 2013-09-19T19:24:01.957 回答
3

这工作正常：

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

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

于 2016-08-11T12:48:27.900 回答
1

如果您需要动态应用多种样式并且想要一个函数来计算这些样式，那么另一种实现此目的的方法也很有用，您可以简单地从视图模型中的函数返回一个字符串。

看法：

<div data-bind="style: $root.calculateStyles() }"></div>

视图模型：

self.calculateStyles = function (obj) { 
    // properties could also potentially be written dynamically depending on obj's state
    return { backgroundColor: '#112233', color: 'white', width: '35px' };
}
于 2015-03-23T15:49:31.850 回答
-1 
<div data-bind="style: { width: WATCHEDPERCENTAGE + '%' }"></div>
于 2014-09-30T11:58:46.247 回答