Question

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

所选索引偏移1

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

我觉得最令人费解的是，BDay和BYear控件几乎完全相同。唯一与底层模型不同的是BYear是一个可以为空的数据类型，但我传入的值不是null。

与往常一样，任何指导都会受到高度赞赏。

代码：`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， “名称”： “MS”}，{ “ID”：4， “名称”： “小姐”}]， “天”：[{ “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 “}]，” 月 “：[{” ID “：1，” 名称 “：” 一月 “}，{” ID “：2”，名称 “：” 二月“} { “ID”：3， “名”： “三八”}，{ “ID”：4， “名称”： “四月”}，{ “ID”：5， “名称”： “五一”}，{ “ID”：6， “名称”： “六一”}，{ “ID”：7， “名”： “七月”}，{ “ID”：8， “名”： “八一”}，{“ID “：9，” 名 “：” 九月 “}，{” ID “：10，” 姓名 “：” 十一 “}，{” ID “：11，” 姓名 “：” 11月 “}，{” ID“： 12， “姓名”： “十二月”}]， “岁月”：[{ “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“： “詹姆斯”，“MName”：“R”，“LName”：“弗莱明”，“兴趣”：“我想知道的是为什么年份不会选择下拉列表显示值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>

Answer 1

我明白了 - 看到前面提到的小提琴答案。我需要做的是使两个值按预期显示的两件事。我陷入一个洞的时间超过了我想要承认的时间，但我希望这一课可以帮助其他人。

我必须发送Id而不是对象

            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]），公司：ko.observable（model.Company），

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

希望这有帮助

淘汰赛选择名单

1 个答案: