我有一份人员名单。对于每个人,我都有真假。我希望这个每个人都有约束力。如果您检查下面的小提琴,它正确绑定但我的单选按钮不能正常工作。我希望每一行都有自己的单选按钮(每行不同的名称)。
例如。第1行单击为true,第2行单击为false。应该允许这样做但是名称与删除第一行的选择相矛盾。谢谢
<table width="300px;">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td>
<span data-bind="text: Name"></span>
</td>
<td>
<input type="radio" name="Status" value="true" data-bind="checked: Status" />
<input type="radio" name="Status" value="false" data-bind="checked: Status" />
</td>
<td><button data-bind="click: $root.changeStatus">Change Status</button></td>
</tr>
</tbody>
</table>
function People(data) {
var self = this;
self.Name= data.Name;
self.Status = ko.observable(data.Status);
}
function PeopleViewModel(userId) {
var self = this;
self.people = ko.observable([
{ Name: 'Bert', Status: true },
{ Name: 'Charles', Status: true },
{ Name: 'Denise', Status: false }
]);
self.changeStatus = function()
{
alert("Change " + this.Name + " to " + this.Status);
};
}
ko.applyBindings(new PeopleViewModel());
答案 0 :(得分:5)
一些事情:
name
属性在所有人中都是相同的。您可以使用attr
绑定更改此设置,并为每个单选按钮组添加人员姓名前缀。people
成为observableArray
,而不仅仅是observable
。Status
属性也应该是可观察的。value
的{{1}}应为字符串。以下是带有更新的修改后的代码:
<强> HTML:强>
Status
<强> JavaScript的:强>
<table width="300px;">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody data-bind="foreach: people">
<tr>
<td>
<span data-bind="text: Name"></span>
</td>
<td>
<input type="radio" value="true" data-bind="attr: { name: Name + '-status' }, checked: Status" />
<input type="radio" value="false" data-bind="attr: { name: Name + '-status' }, checked: Status" />
</td>
<td><button data-bind="click: $root.changeStatus">Change Status</button></td>
</tr>
</tbody>
</table>