具有多个参数的 Knockout 点击绑定答案

【问题标题】：Knockout click binding with multiple parameters具有多个参数的 Knockout 点击绑定
【发布时间】：2017-08-08 02:06:15
【问题描述】：

我对如何将参数从 HTML 传递到函数中感到困惑。

<tbody data-bind="foreach: colorItem">
    <tr>
        <td data-bind="click: $root.colorTest.bind($data, 'red', 'blue'), text: 'color'"></td>
    </tr>
</tbody>


public colorTest(data, param1, param2) {   
    if (param1 == 'red'){
        // do something
    }

在 colorTest 函数中，我希望“data”保存 $data，“param1”保存值“red”，“param2”保存值“blue”。

但是，$data 总是被传递到最后一个参数字段。所以在 colorTest 函数中，data = 'red'，param1 = 'blue'，param2 = '$data'。

这就是淘汰赛的运作方式吗？ $data 总是作为最后一个参数传递给函数，即使它放在 HTML 数据绑定中的第一个？

【问题讨论】：

标签： javascript knockout.js binding

【解决方案1】：

.bind 函数不是淘汰赛的一部分，它是一个 javascript 函数，第一个参数总是应该是“this”上下文。所以只有第一个参数之后的参数作为参数传入。 Reference

您应该如下修改您的绑定：

click: $root.colorTest.bind($root, $data, 'red', 'blue')

Knockout 使用 $data 和 $event 调用函数，它们在绑定的参数之后传递。

【讨论】：

谢谢。这行得通。但是我需要明确传递 $data 吗？正如您所说，Knockout auto 在绑定参数之后发送 $data 和 $event （我看到了这个）。那么它实际上是两次发送 $data 吗？最好使用 "... colorTest.bind($root, 'red', 'blue') 然后在我的函数中使用第三个参数捕获 $data ，使其看起来像 "public colorTest(param1, param2 , 数据)" ?
colorTest函数中如何访问$data的属性？是 $(data).Name 吗？例如？？
@Soya 它是作为函数参数传入的，因此它的名称是您在设置函数时想要的任何名称。如果您使用 2 个参数绑定并使用 function(x,y,z){ console.log(z.Name); }，它可能是“z”

【解决方案2】：

让视图模型中的函数返回一个函数。

ko.applyBindings({
  colorTest: function(param1, param2) {
    return function() {
      console.log('param1 is ' + param1 + ' and param2 is ' + param2);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<button data-bind="click: colorTest('red', 'blue')">Color (click me!)</button>

【讨论】：