javascript - 通过函数不工作应用带有敲除的 % 样式绑定

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

这工作正常：

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

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

Answer 4

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

看法：

<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' };
}

Answer 5

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