Question

我正在尝试将单击事件添加到我的按钮，只有在单击按钮时才会将Id，Category和Name作为参数发送。

<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>

即使我尝试改变：

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

与

 attr: { id: $data.Id ,onclick: getLast7($data.Id, $data.Category, $data.Name)

它仍会触发 getLast7 方法，与tehTab长度一样多次。

我做错了什么？

Answer 1

在函数名称后添加()将调用它。您必须使用.bind

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

示例

function vm(){
  this.notify = function(str){
    console.log(str)
  }
}

ko.applyBindings(new vm())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<div data-bind="click: notify.bind(this, 'Hello')">Click me</div>

Answer 2

即使您可以在点击装订中使用bind进行修复，但我认为这不是最佳解决方案。

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

以下是一个例子：

var data = [
  { Id: 0, Category: "A", Name: "A0" },
  { Id: 1, Category: "B", Name: "B1" },
  { Id: 2, Category: "C", Name: "C2" },
  { Id: 3, Category: "D", Name: "D3" }
];

ko.applyBindings({
  data: data,
  log: function(item) {
    console.log(item);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: data">
  <li data-bind="click: $parent.log, text: Name"></li>
</ul>

如果需要将属性提取到参数列表，请创建一个额外的onClick函数：

var data = [
  { Id: 0, Category: "A", Name: "A0" },
  { Id: 1, Category: "B", Name: "B1" },
  { Id: 2, Category: "C", Name: "C2" },
  { Id: 3, Category: "D", Name: "D3" }
];

var log = function(id, cat, name) {
   console.log("Item ", id, "was clicked. (name:", name, "category:", cat); 
}

ko.applyBindings({
  data: data,
  onClick: function(item) {
    log(item.Id, item.Category, item.Name);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: data">
  <li data-bind="click: $parent.onClick, text: Name"></li>
</ul>

Answer 3

对于循环内的单击绑定，使用 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>

在Knockout脚本中，使用此关键字获取当前行条目

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

Answer 4

我总是使用它并且工作正常。

HTML：

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

的javascript：

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

我希望它有所帮助。

Answer 5

您还可以简单地将点击处理程序（在您的情况下为getLast7）包装在一个函数中。然后，您可以根据需要提供任何参数。来自$ data的属性，自定义值甚至来自不同上下文的属性：

ko.applyBindings({
  container: {
    containerId: 42,
    items: [{
      id: 1,
      category: 'item category',
      name: 'item name',
      log: function(id, category, name, custom, containerId) {
        console.log(`id: ${id}, category: ${category}, name: ${name}, custom text: ${custom} containerId: ${containerId}`);
      }
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: container">
  <div data-bind="foreach: items">
    <button type="button" data-bind="click: function() { log($data.id, $data.category, $data.name, 'custom text', $parent.containerId); }">Click me</button>
  </div>
</div>

Answer 6

如果要保留原始绑定语法，请在视图模型中让该函数返回一个函数。

ko.applyBindings({
  Id: 15,
  Value: ko.observable('Click Me!'),
  Category: 'standard category',
  getLast7: function(id, category, name){
    return function() {
      console.log("You clicked and passed in " + id + ", " + category + ", " + name);
    }
  }
});

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

<button data-bind="click: getLast7($data.Id, $data.Category, 'Hello World!'), text:$data.Value">

Knockout点击绑定参数

6 个答案:

示例