0

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

  • 所选索引偏移 1
  • 我的年份选择列表不会选择任何索引。

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

我发现最令人费解的是 BDay 和 BYear 控件实际上是相同的。与底层模型唯一不同的是 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;
    };

1992"},{"Id":"1993"}],"Associations":"","BDay":2,"BMonth":2,"BYear":1983, "SalutationId":1, "FName": “James”,“MName”:“R”,“LName”:“Fleming”,“I​​nterests”:“我想知道的是为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 1992"},{"Id":"1993"}],"Associations":"","BDay":2,"BMonth":2,"BYear":1983, "SalutationId":1, "FName": “James”,“MName”:“R”,“LName”:“Fleming”,“I​​nterests”:“我想知道的是为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 想知道为什么年份选择下拉菜单不显示值 1983?以及为什么所选索引关闭 1?SalutationId = 1 但显示的值为 SalutationId #2..."}; 想知道为什么年份选择下拉菜单不显示值 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>

4

1 回答 1

0

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

我必须发送 Id 而不是对象

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

对比

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: 'Id' 来更新选择的 HTML。

希望这可以帮助

于 2012-11-28T21:51:28.057 回答