Table 行未显示

Question

我用的是knockout Js。当我单击 table 中的另一个 table 行时，我想用 table header 显示 table 行。我在下面使用了这段代码。谁能帮帮我？

var ViewModel = function() {
  var self = this;
  this.client_details = [{
    name: 'Jack',
    email: 'jack@gmail.io',
    phone: '256987',
    address: 'US',
    dob: '24/01/1975',
    taxid: '125'
  }, {
    name: 'Hari',
    email: 'hari@yahoo.com',
    phone: '247896',
    address: 'chennai',
    dob: '02/01/1975',
    taxid: '255'
  }];

  this.datas = [{
    name: 'John',
    email: 'john@gmail.com',
    phone: '58963287'
  }, {
    name: 'JohnBert',
    email: 'bert@gmail.com',
    phone: '589625887'
  }];
  self.seletedRow = ko.observable();
  self.goToFolder = function(folder) {
    self.seletedRow(folder);
  };
};
ko.applyBindings(new ViewModel(self.datas));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table width='100%'>
  <thead>
    <tr>
      <th width='25%'>Client Name</th>
      <th width='25%'>Email</th>
      <th class='Phone' width='15%'>Phone</th>
      <th class='Address' width='10%'>Address</th>
      <th class='dob' width='15%'>DOB</th>
      <th class='tax' width='15%'>Tax ID</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: client_details">
    <tr class="table_row">
      <td data-bind="text: name,click: $root.goToFolder"></td>
      <td data-bind="text: email"></td>
      <td data-bind="text: phone"></td>
      <td data-bind="text: address"></td>
      <td data-bind="text: dob"></td>
      <td data-bind="text: taxid"></td>
    </tr>
  </tbody>
</table>

<table data-bind="with: seletedRow">
  <thead>
    <tr>
      <th width='25%'>User Name</th>
      <th width='25%'>Email</th>
      <th class='Phone' width='15%'>Phone</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: datas">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: email"></td>
      <td data-bind="text: phone"></td>
    </tr>
  </tbody>
</table>

任何人都可以帮助我使用 knockout 获取 table 行数据吗？

Answer 1

with 绑定创建了一个新的绑定上下文。因此，您的第二个 <table> 查找 name、email 和 phone 属性 在当前选定的客户端 中。

如果您只想 show/hide 第二个 table 基于是否有选择，您可以使用 if 绑定。

如果您想根据所选行对 data 执行任何 filters/logic，您可以使用 computed.

请注意，我也已将您的 click 绑定移动到 <tr>，因此您可以单击行中的任意位置。

var ViewModel = function() {
  var self = this;
  this.client_details = [{
    name: 'Jack',
    email: 'jack@gmail.io',
    phone: '256987',
    address: 'US',
    dob: '24/01/1975',
    taxid: '125'
  }, {
    name: 'Hari',
    email: 'hari@yahoo.com',
    phone: '247896',
    address: 'chennai',
    dob: '02/01/1975',
    taxid: '255'
  }];

  this.datas = [{
    name: 'John',
    email: 'john@gmail.com',
    phone: '58963287'
  }, {
    name: 'JohnBert',
    email: 'bert@gmail.com',
    phone: '589625887'
  }];
  self.selectedRow = ko.observable();
  self.goToFolder = function(folder) {
    self.selectedRow(folder);
  };
};
ko.applyBindings(new ViewModel(self.datas));

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table width='100%'>
  <thead>
    <tr>
      <th width='25%'>Client Name</th>
      <th width='25%'>Email</th>
      <th class='Phone' width='15%'>Phone</th>
      <th class='Address' width='10%'>Address</th>
      <th class='dob' width='15%'>DOB</th>
      <th class='tax' width='15%'>Tax ID</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: client_details">
    <tr class="table_row" data-bind="click: $root.goToFolder">
      <td data-bind="text: name"></td>
      <td data-bind="text: email"></td>
      <td data-bind="text: phone"></td>
      <td data-bind="text: address"></td>
      <td data-bind="text: dob"></td>
      <td data-bind="text: taxid"></td>
    </tr>
  </tbody>
</table>

<table data-bind="if: selectedRow">
  <thead>
    <tr>
      <th width='25%'>User Name</th>
      <th width='25%'>Email</th>
      <th class='Phone' width='15%'>Phone</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: datas">
    <tr>
      <td data-bind="text: name"></td>
      <td data-bind="text: email"></td>
      <td data-bind="text: phone"></td>
    </tr>
  </tbody>
</table>

Table 行未显示

Table row was not showing

html

knockout.js