Question

我正在使用Knockout使用JSON中的数据填充HTML表格，如下所示：

<tbody data-bind="foreach: mainData">
    <tr style="cursor:pointer;" data-bind="click: redirectDetails.bind($data)">
        <td style="width:120px;" data-bind="text: ID"></td>
        <td style="width:250px;" data-bind="text: name"></td>
        <td style="width:250px;" data-bind="text: artist"></td>
        <td style="width:250px;" data-bind="text: length"></td>
     </tr>
</tbody>

我需要将'text：ID'值传递给单击表行时调用的函数。这是我在表格行中尝试的内容：

<tr style="cursor:pointer;" data-bind="click: redirectDetails.bind($data)">

Javascript函数如下所示：

function redirectDetails(data) {
    alert("TEST");
    //need to retrieve ID here
}

这就是我被困住的地方。我不知道如何在用户点击表格行时将ID从表格行传递给JS函数。任何帮助表示赞赏

Answer 1

你正在设计这个问题。 Knockout有点击绑定。绑定将传入$ data，并将event作为其参数，在下面你可以看到使它工作的简单程度。确保在使用循环时记得要回到父元素，或者添加“click”作为对象的函数。

function ViewModel() {
  var self = this;

  self.mainData = ko.observableArray([{
      ID: "1",
      name: "Mona Lisa",
      artist: "DJ Van Gogh",
      length: "3:14"
    },
    {
      ID: "2",
      name: "Move it Lisa",
      artist: "DJ Van Gogh",
      length: "1:14"
    },
    {
      ID: "3",
      name: "Macaroni Lisa",
      artist: "DJ Van Gogh",
      length: "2:14"
    },
    {
      ID: "4",
      name: "Lil' Lisa",
      artist: "DJ Van Gogh",
      length: "0:14"
    },
  ])

  self.rowClick = function(row) {
    console.log(row);
    alert(row.ID);
  }

}

ko.applyBindings(new ViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table>
  <tbody data-bind="foreach: mainData">
    <tr style="cursor:pointer;" data-bind="click: $parent.rowClick">
      <td style="width:120px;" data-bind="text: ID"></td>
      <td style="width:250px;" data-bind="text: name"></td>
      <td style="width:250px;" data-bind="text: artist"></td>
      <td style="width:250px;" data-bind="text: length"></td>
    </tr>
  </tbody>
</table>

将JSON中的值作为参数传递给表行上的函数单击

1 个答案: