javascript - 将单选按钮绑定(bind)到对象数组

我有我的视图模型：

function (dataservice, Person){
    var genders = ko.observableArray();
    var languages = ko.observableArray();
    var person = ko.observableArray();

    function activate(){
        dataservice.getGenders(genders);
        dataservice.getGenders(languages);
    }

    var vm = {
        genders: genders,
        languages: languages,
        person: person
    };
}

function Person(person){
    var firtstName = person.firtstName;
    var familyName = person.familyName;
    var genderId = person.genderId;
    var languageId = person.languageId;
}

为了清楚起见，对其进行了简化。

然后我从服务器获取了“性别”数据，它看起来像这样：

[{
    $id: "1",
    GenderId: 2,
    GenderName: "Female",
    GenderDescription: "Female",
    GenderCode: "F"
}]

我也有Languages看起来像这样：

[{
    "$id": "1",
    "LanguageId": 2,
    "LanguageName": "Afar",
    "LanguageDescription": "Afar",
    "LanguageCode": "aa"
}]

我要实现的目标是，将视图模型中的genders数组绑定为数据源，并使用Person.GenderId作为要更新的值，以便首先选择正确的单选按钮。该选择取决于Person.GenderId。

我使用下拉菜单对Languages做了类似的操作，效果很好：

<section data-bind="with: $root.personModel">
   <select id="language"
           data-bind="options: $root.languages,
                      optionsText: 'LanguageName',
                      optionsValue: 'LanguageId',
                      value: LanguageId,
                      optionsCaption: 'none'">
    </select>
</section>

现在，我正在尝试使用单选按钮执行相同的操作，但是我不知道如何使其工作。这是我所拥有的：

<section data-bind="with: $root.personModel">
   <!-- ko foreach: $root.genders -->
   <input type="radio"
          name="genders"
          data-bind="attr: {value: GenderId}, checked: GenderId" />
   <span data-bind="text: $data.GenderName"></span>
   <!-- /ko -->
</section>

如果我正确理解了所有内容，则foreach绑定的作用类似于with并更改了上下文，因此无法从暴露的GenderId到达Person。

最佳答案

更改

<input type="radio" name="genders" data-bind="attr: {value: GenderId}, checked: GenderId" />

至

<input type="radio" name="genders" data-bind="attr: {value: GenderId}, checked: $parent.GenderId" />

如here所述

$ parent：这是父上下文中的视图模型对象，即当前上下文外部的视图模型对象。在根上下文中，这是未定义的。