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

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>

我需要将“文本: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 有一个点击绑定(bind)。绑定(bind)将传入 $data 和事件作为其参数，下面您可以看到使其工作有多么简单。确保在使用循环时记得返回到父元素，或者添加“点击”作为对象的函数。

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>