Question

例如我有这样的模板，我想根据当前的$ 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？有没有办法做到这一点？

Answer 1

您可以调用以您执行方式返回字符串的函数，但格式略有偏差。以下是一些提示：

您可以使用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/

Knockout模板绑定中的动态值

1 个答案: