javascript - 当选择当前行时 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>

单选按钮的点击绑定(bind)就像；

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

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

Answer 1

您不使用带有单选按钮的点击绑定(bind)。

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

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

另外:您不需要带有 knockout 的 name 属性。但您应该阅读 uniqueId and uniqueFor custom bindings让标签元素正常工作。

<小时/>

使用 value 与 $data 绑定(bind)会产生以下行为:

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

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

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