0

例如我有这样的模板，我想根据当前 $index 动态计算一些值 

    <div class="cond" title="Click to flip">
        <div class="condFlip" data-bind="attr: {id: Id }, click: viewModel.setClick">               
            <div class="piece-all piece" data-bind="attr: {style: background-position: viewModel.getValue($index)  viewModel.getValue($index) }"></div>
        </div>
    </div>      
</script>

<script type="text/javascript">
    viewModel = {
        flips: ko.observableArray([]),      

        setClick: function (data, e) {
            e.preventDefault();
            //doing things
        },

        getValue: function (data, e) {
            return //get my value
        }        
    };    

ko.applyBindings(viewModel);

那么如何在模型绑定中使用函数 viewModel.getValue 呢？有什么办法吗？

4

1 回答 1

2

您可以按照您正在执行的方式调用返回字符串的函数，但您的格式略有不同。这里有一些提示：

  • 您可以使用style绑定而不是attr绑定，因为它将添加/删除单个样式而不是替换整个样式属性（对于您的情况可能并不重要）。

  • 在绑定字符串中，background-position是您为指定绑定而创建的对象文字中的无效属性名称。您需要使用"background-position"引号或可以在 JavaScript 中使用的名称backgroundPosition

  • 您可能希望您的getValue函数返回完整的字符串，15px 30px或者在绑定中构建它，例如： getValue($index) + ' ' + getValue($index)

  • $index是一个可观察的，所以当你在你的函数中处理它时，你需要将它作为一个函数调用来获取它的值。

因此，您的绑定可能如下所示：

<i class="icon-blah" data-bind="style: { backgroundPosition: viewModel.getValue($index) + ' ' + viewModel.getValue($index) }"></i>

示例：http: //jsfiddle.net/rniemeyer/BAVZa/

于 2012-08-28T01:28:08.283 回答