Question

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 &nbsp;&nbsp; Day &nbsp;&nbsp; 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>

Answer 1

I got it – see previously mentioned fiddle for answer. What I needed to do was two things to make the values appear as expected. I fell in a hole for longer than I’d care to admit, but I hope this lesson learned can help someone else.

I had to send in the Id not the object

            BDay: ko.observable(model.BDay),
            BMonth: ko.observable(model.BMonth),
            BYear: ko.observable(model.BYear),

vs

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

I also needed to update the HTML of the selects by adding optionsValue: ‘Id’.

Hope this helps