Knockout js table 行点击打断单选按钮点击绑定

Question

我正在努力解决这个问题。我有一个 table，其中有许多行绑定到 knockout 中的视图模型。

想法是可以select编辑一行。有一个单选按钮指示 selection。但是，在这种情况下，当我单击该行时，单选按钮变为 selected - 正如我所希望的那样。但是，当单击单选按钮时，它不会 select 本身。

这是使用 table 行点击绑定实现的。

<tr data-bind="click: $parent.doSelect.bind($parent, $data);">

这会导致无线电 selection 出现问题。您可以看到绑定值已设置，但由于某些原因，单选按钮 selection 不会更改。

怎样才能让selection的两种方式都玩得很好？

这是一个fiddle

html

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

<table>
  <thead>
    <th>Select</th>
    <th>Col A</th>
    <th>Col B</th>
  </thead>
  <tbody>
    <!-- ko foreach: { data: items, as: 'item' } -->
    <tr data-bind="click: $parent.doSelect.bind($parent, $data);">
      <td>
        <input type="radio" name="selectMe" data-bind="checkedValue: Id(), checked: $parent.selectedItemId" />
      </td>
      <td data-bind="text: Name"></td>
    </tr>
    <!-- /ko -->
  </tbody>
</table>

<p>
  You have selected <span data-bind="text: selectedItemId"></span>
</p>

javascript

function MyViewModel() {

  this.selectedItemId = ko.observable(null);

  this.items = ko.observable([{
      Id: ko.observable(1),
      Name: ko.observable("Dave")
    },
    {
      Id: ko.observable(2),
      Name: ko.observable("Bob")
    },
  ]);

  this.selectedItemId.subscribe(function(itemId) {
    console.log("selectedItemId.subscribe: fired for " + itemId);
    var self = this;
    _.forEach(this.items(), function(item) {
      if (itemId == item.Id()) {
        // need to set something here
      }
    });
  }, this);

}

MyViewModel.prototype.doSelect = function(item) {
  var itemId = ko.unwrap(item.Id);
  console.log("doSelect: " + itemId);

  this.selectedItemId(itemId);
};

ko.applyBindings(new MyViewModel());

Answer 1

在函数doSelect中必须returntrue否则事件不会冒泡。

MyViewModel.prototype.doSelect = function(item) {
  var itemId = ko.unwrap(item.Id);

  this.selectedItemId(itemId);

  return true;
};

参见 KO documentation。

However, if you do want to let the default click action proceed, just return true from your click handler function.

Knockout js table 行点击打断单选按钮点击绑定

Knockout js table row click breaks radio button click binding

knockout.js