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: $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 4

这很好用：

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

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

Answer 5

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

通过功能不起作用将％样式绑定应用于敲除

5 个答案: