淘汰赛模板绑定中的动态值答案

【问题标题】：Dynamic values in Knockout template binding淘汰赛模板绑定中的动态值
【发布时间】：2012-08-28 09:28:08
【问题描述】：

例如，我有这样的模板，我想根据当前的 $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？有什么办法吗？

【问题讨论】：

标签： knockout.js knockout-2.0

【解决方案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/

【讨论】：