Javascript 使用参数单击绑定

我正在尝试向我的按钮添加一个click事件，该事件将仅在单击按钮时发送Id、类别和名称作为参数

<tbody data-bind="foreach: tehTab()">
    <tr>
       <td data-bind="text: $data.Category"></td>
       <td data-bind="text: $data.Name"></td>
       <td>
          <button type="button" class="btn chart_btn" role="button" data-toggle="popover" data-trigger="focus" data-html="true" data-placement="right" container="body" tabindex="0" data-original-title="" title="" style="border:none; background-color:white" data-bind="attr: { id: $data.Id,'data-contentwrapper':'.chartdraw' + $data.Id},click: getLast7($data.Id, $data.Category, $data.Name) , text:$data.Value"></button>
         <div data-bind="css: 'chartdraw' + $data.Id" class="chartdrawetc" style="display:none">ASD</div>
       </td>
   </tr>
</tbody>

与

它仍然激发getLast7方法的次数是tehTab长度的两倍

我做错了什么？

在函数名之后添加

（）

将调用它。您必须使用

.bind

click: getLast7.bind(this, $data.Id, $data.Category, $data.Name)

样品

函数vm（）{
this.notify=函数（str）{
console.log（str）
}
}
ko.applyBindings（新vm（））

单击我

即使您可以在单击绑定中使用

绑定

进行修复，但我认为这不是最好的解决方案

默认情况下，

单击

绑定将单击的模型传递给侦听器。Bind将为每个项目创建一个新函数，并将逻辑移动到视图中

下面是一个例子：

var数据=[
{Id:0，类别：“A”，名称：“A0”}，
{Id:1，类别：“B”，名称：“B1”}，
{Id:2，类别：“C”，名称：“C2”}，
{Id:3，类别：“D”，名称：“D3”}
];
ko.applyBindings({
数据：数据，
日志：功能（项）{
控制台日志（项目）；
}
});



要在循环内单击绑定，请使用this获取当前行中条目的值

<tbody data-bind="foreach: DataList">
 <tr>
  <td><input type="label" data-bind="text: Id"></td>
  <td><input type="label" data-bind="text: Category"></td>
  <td><input type="label" data-bind="text: Name"></td>
  <td><input type="button" data-bind="click: $parent.getCompleteDetails" value="View Details"/></td>   
 </tr>
</tbody>

我总是用它，效果很好

html:

我希望它能有所帮助。
您也可以简单地将单击处理程序（本例中为getLast7）包装到函数中。然后，您可以根据需要为其提供任何参数。来自$data的属性、自定义值，甚至来自不同上下文的属性：


ko.applyBindings({
容器：{
集装箱运输：42，
项目：[{
id:1，
类别：'项目类别'，
名称：'项目名称'，
日志：函数（id、类别、名称、自定义、容器id）{
log（`id:${id}，category:${category}，name:${name}，自定义文本：${custom}containerId:${containerId}`）；
}
}]
}
});

点击我
如果要保留原始绑定语法，请让viewmodel中的函数返回函数


ko.applyBindings({
身份证号码：15，
值：ko.observable（'Click Me！'），
类别：“标准类别”，
getLast7:函数（id、类别、名称）{
返回函数（）{
log（“您单击并传入了“+id+”、“+category+”、“+name”）；
}
}
});

你说得对！看来我只需要加上一句就行了。非常感谢！：）如果您只需要当前上下文，则很好，但如果您希望使用其他数据（如父上下文）调用函数，则不需要。示例：
data bind=“click:$root.dataClicked.bind（this，$data，$parent）”
当然正确，谢谢您的评论。不过，我确实认为您应该努力防止绑定上下文的依赖关系。只要有可能，我就通过在代码中传递引用而不是通过视图来定义父/子模型之间的关系。
click: getLast7.bind(this, $data.Id, $data.Category, $data.Name)

<tbody data-bind="foreach: DataList">
 <tr>
  <td><input type="label" data-bind="text: Id"></td>
  <td><input type="label" data-bind="text: Category"></td>
  <td><input type="label" data-bind="text: Name"></td>
  <td><input type="button" data-bind="click: $parent.getCompleteDetails" value="View Details"/></td>   
 </tr>
</tbody>

  self.DataList   =ko.observableArray([]); //this is used to populate the data entries.
  self.getCompleteDetails= function() {   
    alert(this.Id);
    alert(this.Category);
    alert(this.Name);
  }

<input type="button" value="click to test" data-bind="click: $root.getCompleteDetails" />

getCompleteDetails: function (item, event) {
            // you can access all properties in item parameter 
        }