jquery - 每行 knockout 不同的单选按钮列表

Question

我有一个人员列表。对于每个人，我都有一个真/假状态。我希望这个对每个人都有约束力。如果您检查下面的 fiddle ，它绑定(bind)正确，但我的单选按钮无法按预期工作。我希望每一行都有自己的一组单选按钮(每行有不同的名称)。

例如。第 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());

​

Answer 1

一些事情:

• name 属性对于所有人来说都是相同的。您可以使用 attr 绑定(bind)并在每个单选按钮组前添加人员姓名前缀来更改此设置。
• 您可能想让 people 成为一个 observableArray 而不仅仅是一个 observable。
• 如果您希望更新底层数据模型，每个人的 Status 属性也应该是可观察的。
• 您分配状态的值应该是一个字符串。

这是经过更新的修改后的代码:

HTML:

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

JavaScript:​

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.observableArray([
    {
        Name: 'Bert',
        Status: ko.observable('true')
    },
    {
        Name: 'Charles',
        Status: ko.observable('true')
    },
    {
        Name: 'Denise',
        Status: ko.observable('false')
    }]);

    self.changeStatus = function() {
        alert("Change " + this.Name + " to " + this.Status());
        if (this.Status() === "true") {
            this.Status('false');
        } else {
            this.Status('true');
        }
    };
}

ko.applyBindings(new PeopleViewModel());​

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