I am able to populate my select list boxes per guidance from http://learn.knockoutjs.com/#/?tutorial=collections. I am however faced with two problems.
- The selected index is offset by 1 My years select list won't select any index.
I put a fiddle up here: http://jsfiddle.net/poundingCode/a9MGk/ and added the data from the call to my server.
The thing I find most puzzling is that BDay and BYear controls are virtually identical. The only thing that is different from the underlying Model is that BYear is a nullable datatype, but the value I'm passing in isn't null.
As always, any guidance would be greatly appreciated.
the code: `var Namespace = {};
// View model declaration
Namespace.initMemberVM = function (model) {
console.log('initViewCalled');
var memberViewModel = {
Id: ko.observable(model.Id),
BDay: ko.observable(model.Days[model.BDay]),
BMonth: ko.observable(model.Months[model.BMonth]),
BYear: ko.observable(model.Years[model.BYear]),
Company: ko.observable(model.Company),
FName: ko.observable(model.FName),
LName: ko.observable(model.LName),
Interests: ko.observable(model.Interests),
Married: ko.observable(model.Married),
MName: ko.observable(model.MName),
Name: ko.observable(model.Name),
SalutationId: ko.observable(model.SalutationId),
Salutation: ko.observable(model.Salutations[model.SalutationId]),
Months: ko.observableArray(model.Months),
Days: ko.observableArray(model.Days),
Years: ko.observableArray(model.Years),
Salutations: ko.observableArray(model.Salutations)
};
return memberViewModel;
};
var data = {"Salutations":[{"Id":1,"Name":"Mr"},{"Id":2,"Name":"Mrs."},{"Id":3,"Name":"Ms"},{"Id":4,"Name":"Miss"}],"Days":[{"Id":"1"},{"Id":"2"},{"Id":"3"},{"Id":"4"},{"Id":"5"},{"Id":"6"},{"Id":"7"},{"Id":"8"},{"Id":"9"},{"Id":"10"},{"Id":"11"},{"Id":"12"},{"Id":"13"},{"Id":"14"},{"Id":"15"},{"Id":"16"},{"Id":"17"},{"Id":"18"},{"Id":"19"},{"Id":"20"},{"Id":"21"},{"Id":"22"},{"Id":"23"},{"Id":"24"},{"Id":"25"},{"Id":"26"},{"Id":"27"},{"Id":"28"}],"Months":[{"Id":1,"Name":"January"},{"Id":2,"Name":"February"},{"Id":3,"Name":"March"},{"Id":4,"Name":"April"},{"Id":5,"Name":"May"},{"Id":6,"Name":"June"},{"Id":7,"Name":"July"},{"Id":8,"Name":"August"},{"Id":9,"Name":"September"},{"Id":10,"Name":"October"},{"Id":11,"Name":"November"},{"Id":12,"Name":"December"}],"Years":[{"Id":"1942"},{"Id":"1943"},{"Id":"1944"},{"Id":"1945"},{"Id":"1946"},{"Id":"1947"},{"Id":"1948"},{"Id":"1949"},{"Id":"1950"},{"Id":"1951"},{"Id":"1952"},{"Id":"1953"},{"Id":"1954"},{"Id":"1955"},{"Id":"1956"},{"Id":"1957"},{"Id":"1958"},{"Id":"1959"},{"Id":"1960"},{"Id":"1961"},{"Id":"1962"},{"Id":"1963"},{"Id":"1964"},{"Id":"1965"},{"Id":"1966"},{"Id":"1967"},{"Id":"1968"},{"Id":"1969"},{"Id":"1970"},{"Id":"1971"},{"Id":"1972"},{"Id":"1973"},{"Id":"1974"},{"Id":"1975"},{"Id":"1976"},{"Id":"1977"},{"Id":"1978"},{"Id":"1979"},{"Id":"1980"},{"Id":"1981"},{"Id":"1982"},{"Id":"1983"},{"Id":"1984"},{"Id":"1985"},{"Id":"1986"},{"Id":"1987"},{"Id":"1988"},{"Id":"1989"},{"Id":"1990"},{"Id":"1991"},{"Id":"1992"},{"Id":"1993"}],"Associations":"","BDay":2,"BMonth":2,"BYear":1983, "SalutationId":1, "FName":"James", "MName":"R", "LName":"Fleming", "Interests":"What I'd like to know is WHY won't the year select dropdown show the value 1983??? AND WHY is it that the selected Index is off by 1? SalutationId = 1 but the value displayed is for SalutationId #2..."};
$(document).ready(function () {
var viewModel = Namespace.initMemberVM(data);
ko.applyBindings(viewModel);
});`
the HTML
<article>
<h2>Summary</h2>
<label data-bind="text: FName"></label>
<table>
<tbody>
<tr><td>User Id</td><td colspan="4"><label data-bind="text: Name"></label></td></tr>
<tr>
<td>Salutation</td><td><select data-bind="options: Salutations, value: Salutation, optionsText: 'Name', optionsCaption: 'Select'"></select></td>
</tr>
<tr>
<td></td><td>First</td><td>Middle</td><td>Last</td>
</tr>
<tr>
<td>Name</td><td><input type="text" data-bind="value: FName"></td><td><input type="text" data-bind="value: MName"></td><td><input type="text" data-bind="value: LName"></td>
</tr>
<tr><td></td><td colspan="2">Month Day Year</td></tr>
<tr><td>DOB</td><td colspan="2">
<select name="BMonth" data-bind="options: Months, value: BMonth, optionsText: 'Name', optionsCaption: 'Select'"></select>/
<select name="BDay" data-bind="options: Days, value: BDay, optionsText: 'Id', optionsCaption: 'Select' "></select>
<select name="BYear" data-bind="options: Years, value: BYear, optionsText: 'Id', optionsCaption: 'Select'"></select>
</td><td> <label><input type="checkbox" data-bind="checked: Married">Married</label></td></tr>
<tr><td><label>Interests</label></td><td colspan="3"><textarea data-bind="value: Interests" rows="10" cols="40"></textarea></td></tr>
</tbody>
</article>
