Question

试图弄清楚如何在淘汰赛中的表格中设置单选按钮绑定。我希望选择桌面上的单选按钮。整个选定的记录在模型中可用。不太确定如何设置无线电输入的绑定。我假设我需要使用$ parent和函数进行值绑定？

这是小提琴。（所选记录现在没有做任何事情我希望在选择单选按钮时填充它）

HTML

<table>
<thead>
  <tr>
  <th>Select</th>
    <th>First</th>
    <th>Last</th>
    <th>Dept</th>
  </tr>
</thead>
  <tbody data-bind='foreach: employees'>
    <tr>
      <td><input type="radio" name="employees"></td>
      <td data-bind='text: first'></td>
      <td data-bind='text: last'></td>
      <td data-bind='text: dept'></td>
    </tr>
  </tbody>
</table>

<div data-bind="with: selectedRow">
<h2>
  Selected Record
  </h2>
 <p>
    First:  <span data-bind="first" ></span>
 </p> 
 <p>
  Last:  <span data-bind="last" ></span>
 </p> 
 <p>
  Dept:  <span data-bind="dept" ></span>
 </p>

</div>

JS

function employee(first, last, dept) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.dept = ko.observable(dept);
}

function model() {
  var self = this;
  this.employees = ko.observableArray("");
  this.selectedRow = ko.observable({});

};

var myViewModel = new model();

$(document).ready(function() {
  ko.applyBindings(myViewModel);
  myViewModel.employees.push(
     new employee("Bob","Jones", "Hr")
  );
  myViewModel.employees.push(
     new employee("Sarah","Smith", "It")
  );
   myViewModel.employees.push(
     new employee("John","Miller", "It")
  );


});

Answer 1

您必须执行两个步骤才能使代码正常运行。

首先，将绑定应用于单选按钮：

<input type="radio" data-bind="checked: $root.selectedRow, checkedValue: $data" />

checkedValue应包含与当前单选按钮对应的实际值。在这种情况下，我们引用$data变量，它是整个员工对象而不是简单（标量）值。

checked绑定应引用包含当前所选员工的可观察对象。

其次，更正定义selectedRow属性的行：

this.selectedRow = ko.observable();

不要将空对象作为默认值传递。否则with绑定无法正常工作。

通过在显示所选员工的第二个块中修复绑定语法，您将获得类似this的内容。

从淘汰表

1 个答案: