每行敲除不同的单选按钮列表

时间:2012-11-19 19:06:24

标签: jquery knockout.js

我有一份人员名单。对于每个人,我都有真假。我希望这个每个人都有约束力。如果您检查下面的小提琴,它正确绑定但我的单选按钮不能正常工作。我希望每一行都有自己的单选按钮(每行不同的名称)。

例如。第1行单击为true,第2行单击为false。应该允许这样做但是名称与删除第一行的选择相矛盾。谢谢

http://jsfiddle.net/ef3fV/5/

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

1 个答案:

答案 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>

示例: http://jsfiddle.net/AKKvz/