Question

我有我的观点模型：

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

为了清晰起见，它已经简化了。

然后我有我的'性别＆＃39;来自服务器的数据，它看起来像这样：

[{
    $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。

Answer 1

更改

<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：这是父上下文中的视图模型对象，即当前上下文之外的视图模型对象。在根上下文中，这是未定义的。

Answer 2

您需要使用checkdValue绑定，请参阅the "checked" documentation的下半部分。

你的代码并没有完全翻译成repro，但在你的场景中或多或少都是我的版本。假设这段代码：

var Person = function(person) {
    var self = this;
    self.name = ko.observable(person.name);
    self.gender = ko.observable(person.gender);
};

var root = {
    genders: [{ $id: "1", GenderId: 1, GenderName: "Female"},
              { $id: "2", GenderId: 2, GenderName: "Male"}]
};

root.personModel = new Person({name: 'john', gender: root.genders[1]});

ko.applyBindings(root);

除此标记外：

<section data-bind="with: $root.personModel">
    <!-- ko foreach: $root.genders -->
    <input type="radio" 
           name="genders" 
           data-bind="checkedValue: $data, checked: $root.personModel.gender" />
    <span data-bind="text: $data.GenderName"></span><br />
    <!-- /ko -->
</section>

这应该有效，请参阅this fiddle。

genders数组中的对象绑定到每个checkedValue的{{1}}，并且personModel的性别绑定到input。

将单选按钮绑定到对象数组

2 个答案: