时间戳

首页 > 解决方案 > Knockout js表格行点击中断单选按钮点击绑定

knockout.js - Knockout js表格行点击中断单选按钮点击绑定

问题描述

我正在尝试解决这个问题。我有一个表，其中有许多行绑定到knockout.

这个想法是可以选择一行。有一个单选按钮来指示选择。但是，在这种情况下，当我单击该行时，单选按钮会被选中 - 正如我所希望的那样。但是，当单击单选按钮时，它不会选择自身。

这是使用表格行单击绑定来实现的。 

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

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

我怎样才能让这两种选择方式都发挥得很好？

这是一个小提琴

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());

标签： knockout.js

解决方案

在函数中doSelect你必须返回true，否则事件不会冒泡。

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

  this.selectedItemId(itemId);

  return true;
};

请参阅 KO文档。

但是，如果您确实想让默认点击操作继续进行，只需从您的点击处理程序函数中返回 true。

推荐阅读