Question

我正在进行我的第一个淘汰项目并且可以使用一些指导。到目前为止，我可以从我的服务中填充我的视图模型中的主类，但我正在尝试绑定选择列表框，并且控件没有像我预期的那样绑定，尽管数据可用。虽然我现在可以获取选择列表数据来填充表单，但它没有选择正确的索引。

非常感谢您的关注！

  // Initialized the namespace
    var Namespace = {};

    // View model declaration
    Namespace.initMemberVM = function (model) {
        var memberViewModel = {
            Id: ko.observable(model.Id),
            Married: ko.observable(model.Married),
            Name: ko.observable(model.Name),
            SalutationId : ko.observable(model.SalutationId),
            Salutation: ko.observable(Namespace.salutations[model.SalutationId]),
            Salutations: Namespace.salutations 
        };
        return memberViewModel;
    };

    Namespace.initSalutations = function (model) {
        console.log('called initSalutations');
        Namespace.salutations = ko.mapping.fromJS(model); 
    };


 // Bind the member
    Namespace.bindData = function (model) {
        // Create the view model
        var viewModel = Namespace.initMemberVM(model);

        ko.applyBindings(viewModel);
    };
    $(document).ready(function () {
        Namespace.getSalutations();
        Namespace.getMember(1);
    });

这是从ajax调用返回的数据

[{"Id":1,"Name":"Mr","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":2,"Name":"Mrs.","IsMarried":true,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":3,"Name":"Ms","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"},{"Id":4,"Name":"Miss","IsMarried":false,"TimeStamp":"2012-11-27T21:49:10.583"}]

这是HTML

 <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: Id, optionsText: 'Name'"></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>


    </tbody>

更新：在进一步挖掘之后我发现我的select没有保持正确索引的原因是b / c当我试图设置该值时，Namespace.salutations数组没有及时填充到我的memberViewModel。

任何关于如何管理的指导都将受到赞赏！

Answer 1

对于那些遇到类似问题的人，以下是您可能觉得有用的其余代码。同样，如果你在评论中错过了它，我更新了我对服务的第一次调用，以便为我的控制器和我的成员带回数据。我稍后会调整这种方法，以便存储参考数据以供以后单独使用，但现在......

 $.each(my.dataService.member.Salutations, function (i, p) {
                    salutations.push(new my.Dropdown(selectedItem)
                            .id(p.Id)
                            .name(p.Name)
                    );
                });


    // for creating Position Models
    my.Dropdown = function (selectedItem) {
        var self = this;
        self.id = ko.observable();
        self.name = ko.observable();
        // non-persitable properties
        self.isSelected = ko.computed(function () {
            return selectedItem() === self;
        });
    };

Knockout将选择列表映射到ViewModel

1 个答案: