I have my view model:
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;
}
It's simplified for clarity.
Then I have my `Genders' data from server, it looks like this:
[{
$id: "1",
GenderId: 2,
GenderName: "Female",
GenderDescription: "Female",
GenderCode: "F"
}]
I also have Languages
that looks like this:
[{
"$id": "1",
"LanguageId": 2,
"LanguageName": "Afar",
"LanguageDescription": "Afar",
"LanguageCode": "aa"
}]
What I am trying to achieve is to bind the genders
array from my view model as a data source and use Person.GenderId
as the value to be updated, in a way such that the correct radio button is initially selected. This selection depended on Person.GenderId
.
I did something similar with Languages
using a drop down and that works just fine:
<section data-bind="with: $root.personModel">
<select id="language"
data-bind="options: $root.languages,
optionsText: 'LanguageName',
optionsValue: 'LanguageId',
value: LanguageId,
optionsCaption: 'none'">
</select>
</section>
Now I am trying to do the same thing with radio buttons, but I don't know how to make it work. Here's what I have:
<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>
If I understood things correctly, the foreach
binding works like with
and changes my context, so I can't reach GenderId
from my exposed Person
.