淘汰赛选择名单答案

【问题标题】：Knockout select list淘汰赛选择名单
【发布时间】：2012-11-29 05:51:28
【问题描述】：

我可以根据http://learn.knockoutjs.com/#/?tutorial=collections 的指导填充我的选择列表框。然而，我面临两个问题。

所选索引偏移 1

我在这里放了一个小提琴：http://jsfiddle.net/poundingCode/a9MGk/ 并将调用中的数据添加到我的服务器。

我觉得最令人费解的是 BDay 和 BYear 控件实际上是相同的。唯一与底层 Model 不同的是 BYear 是一个可以为空的数据类型，但我传入的值不是空的。

一如既往，我们将不胜感激任何指导。

代码：`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,"姓名":"女士"},{"身份证":4,"姓名":"小姐"}],"天数":[{"身份证":"1"},{"身份证":"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":"195 7"},{"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”：“我想知道的是为什么年份选择下拉菜单不显示值 1983？以及为什么所选索引关闭 1？ SalutationId = 1 但显示的值为 SalutationId #2..."};

    $(document).ready(function () {
          var viewModel = Namespace.initMemberVM(data);
        ko.applyBindings(viewModel);
    });`

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>

【问题讨论】：

标签： knockout.js

【解决方案1】：

我明白了 - 请参阅前面提到的小提琴以获得答案。我需要做的是让值按预期显示的两件事。我陷入困境的时间比我愿意承认的要长，但我希望吸取的教训可以帮助其他人。

我必须发送 ID 而不是对象

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

对

生日：ko.observable(model.Days[model.BDay]), BMonth: ko.observable(model.Months[model.BMonth]), BYear: ko.observable(model.Years[model.BYear]), 公司：ko.observable(model.Company),

我还需要通过添加 optionsValue: 'Id' 来更新选择的 HTML。

希望对你有帮助

【讨论】：