当选择当前行时，KnockoutJS选中了单选按钮

Question

我有一个如下列表;

如果单击列表行编辑之一，我想在用户表单中设置单选按钮。

我的单选按钮的html像;

<form data-bind="submit: saveUser" class="form-horizontal">
    <div class="form-group">
        <div class="col-md-10">
            <input type="text" class="form-control" placeholder="Name" data-bind="value: currentUser().name" />
        </div>
    </div>


    <!--Gender-->
    <div class="form-group">
        <div class="col-md-10" data-bind="foreach: genders">
            <input type="radio" name="genderGroup" data-bind="checked: $root.radioGender, value: id" style="margin: 5px"/><span data-bind="text: name"></span>
        </div>
    </div>


    <!--Role-->
    <div class="form-group">
        <div class="col-md-10">
            <select class="form-control" data-bind="options: $root.roles, optionsText: 'name', optionsValue: 'id',value: currentUser().roleId, optionsCaption: 'Choose Component'"></select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-10">
            <button type="submit" class="btn">Save User</button>
        </div>
    </div>
</form>

和单选按钮的点击绑定就像;

self.radioGender = function (gender) {
self.currentGender(gender);
if (gender !== self.selectedGender()) {
    self.selectedGender(gender);            
    self.currentUser().genderId(gender.id());
} 
    return true;
};

最后，它是点击编辑按钮时的功能;

self.modifyUser = function (user) {
    self.radioGender(self.currentGender());
    self.currentUser(user);
}

我读了一些关于检查绑定的内容，但我没有解决问题。

Answer 1

您不能使用带有单选按钮的点击装订。

＆＃13;

＆＃13;

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: id"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

＆＃13;

＆＃13;

另外：你不需要淘汰name属性。但是你应该阅读uniqueId and uniqueFor custom bindings来获取标签元素。

使用value绑定$data可以解决此问题：

＆＃13;

＆＃13;

ko.applyBindings({
  radioGender: ko.observable(0),
  genders: [
    {id: 0, name: 'undefined'},
    {id: 1, name: 'female'},
    {id: 2, name: 'male'}
  ]
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<div data-bind="foreach: genders">
  <label>
    <input type="radio" data-bind="checked: $root.radioGender, value: $data"/><span data-bind="text: name"></span>
  </label>
</div>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

＆＃13;

＆＃13;

我发现这比将自己局限于相关对象的单个属性更有用，但它与传统（非Ajax）表单提交不兼容。

Answer 2

您应该可以将单选按钮直接绑定到genderId中的currentUser可观察对象：

data-bind="checked: $parent.currentUser().genderId, value: id"