Question

我有一个jquery knockout模板，可以呈现foreach。

在每个项目中，我多次使用相同的功能（用于css绑定和其他子元素的可见性）

是否有可能不是为foreach中的每个项目多次调用相同的函数，而是临时保存它然后在模板中重复使用它？

PS：我知道我可以使用css选择器设置<i class="fa " />标签的可见性，但这不能回答这个问题。

<script type="text/html" id="properties-template">
    <!-- ko foreach: Groups -->

        <!-- saving the result in a variable instead of calling it so many times -->
        <!-- var isValid = isGroupValid($data); !-->

        <div class="group" data-bind="css: { 'valid': isGroupValid($data) }">
            <div class="iconContainer">
                <!-- ko if: $root.isGroupValid($data) === false -->
                    <i class="fa fa-square-o"></i>
                <!-- /ko -->
                <!-- ko if: $root.isGroupValid($data) === true -->
                    <i class="fa fa-check-square"></i>
                <!-- /ko -->
            </div>
        </div>
    <!-- /ko -->
</script>

Answer 1

由于$data本身就是viewmodel，你可以在那里有一个计算的observable，它可以执行当前所做的任何逻辑isGroupValid。所以我假设你的视图模型看起来像

function ViewModel(){
   this.isGroupValid = function(data){
      // some logic returning boolean
   }
}

这是一个展示“之前”的实例：http://jsfiddle.net/hbSj7/

将其更改为：

function ViewModel(){
   this.isGroupValid = ko.computed(function(){
      // some logic returning boolean
      // just use "this" where you used to use "data"
   }, this);
}

然后只需将模板更改为，例如/

<div class="group" data-bind="css: { 'valid': isGroupValid() }">
    <div class="iconContainer">
        <!-- ko if: !isGroupValid() -->
            <i class="fa fa-square-o"></i>
        <!-- /ko -->
        <!-- ko if: isGroupValid() -->
            <i class="fa fa-check-square"></i>
        <!-- /ko -->
    </div>
</div>

以下是更改为此方法的实际示例：http://jsfiddle.net/ug9ax/

重要的区别在于当前的方法，每次调用函数时都会执行该函数，如果更改的方法只依赖于更改，则计算结果只会重新计算，就像viewmodel中的其他可观察属性一样。

Knockout在模板中保存变量

1 个答案: