2

私は人のリストを持っています。人ごとに、私は真/偽のステータスを持っています。これは一人ずつ縛ってほしい。以下の Fiddle を確認すると、正しくバインドされていますが、ラジオ ボタンが期待どおりに機能していません。各行に独自のラジオボタンのセット(行ごとに異なる名前)を持たせたいと思います。

例えば。行 1 をクリックして true、行 2 をクリックして false にします。それは許可されるべきですが、名前が競合しているため、行1の選択が削除されます。ありがとうございました

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>

</p> 

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

</p>

4

1 に答える 1

5

いくつかのこと：

  • name属性はすべての人で同じです。attrこれは、各ラジオ ボタン グループに名前を付けてバインドすることで変更できます。
  • おそらく、 だけでなくを作成peopleするつもりでした。observableArrayobservable
  • 基礎となるデータモデルを更新する場合は、各人のStatusプロパティも監視可能にする必要があります。
  • にvalue割り当てる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: </p> 

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/

于 2012-11-19T19:16:16.983 に答える