通过函数应用带有挖空的 % 样式绑定不起作用

Applying a % style binding with knockout via function not working

本文关键字：样式 绑定 不起作用 函数 应用      更新时间：2023-09-26

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

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

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

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

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

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

看起来它不会接受匿名函数，但是如果您将该函数定义为命名方法，我让它工作了。

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

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

这工作正常：

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

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

另一种

实现此目的的方法也很有用，如果您需要动态应用多个样式并且希望单个函数来计算这些样式，您只需从视图模型中的函数返回字符串即可。

视图：

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

<div data-bind="style: { width: WATCHEDPERCENTAGE + '%' }"></div>
相关文章：