Question

我没有收到任何错误，但出于某种原因（可能很简单）我无法在下拉列表中显示值。

我的淘汰赛：

function UserRecruitingViewModel(apiBaseUrl, userId) {
var self = this;
self.orgs = ko.observableArray();
//ddl org view switcher stuff
self.orgDdl = ko.observableArray();
self.selectedOrg = ko.observable();
var DropdownOrg = function (name, guid) {
    this.orgName = name;
    this.orgId = guid;
};

//pull initial data
$.getJSON(apiBaseUrl + "?userId=" + userId, function (data) {
    //alert(data);
    $.each(data, function () {
        //alert(data);
        var dropdownOrg = new DropdownOrg();
        var org = new Organization();
        $.each(this, function (k, v) {
            //alert("in foreach");

            if (k == "UserGuid") {
                org.userGuid = v;
            }
            if (k == "OrgGuid") {
                dropdownOrg.orgId = v;
                org.orgGuid = v;
            }
            if (k == "OrgName") {
                dropdownOrg.name = v;
                org.orgName = v;
            }
            if (k == "IsHiring") {
                org.isHiring = v;
            }
            if (k == "Blurb") {
                org.blurb = v;
            }
            //alert("k var: "+k); //field name
            //alert("v var "+v); //field value
            //alert("data var " + data); //array of objects (3)
            //alert(org);

        });
        alert("ddl " + dropdownOrg.name);
        self.orgDdl.push(dropdownOrg);
        self.orgs.push(org);
    });
});
}

alert("ddl " + dropdownOrg.name)中的

我看到了正确的值。在我的页面上我有这个：

<ul class="list-unstyled" data-bind="foreach: orgs">
        <div class="row">
            <div class="col-md-6">
                <p>
                    Viewing:
                    <select class="form-control"
                            data-bind="options: $parent.orgDdl(), optionsText: orgName, value: orgGuid, optionsCaption: 'Change...'"></select>
                </p>
...snip...

当我在浏览器中提取页面时，我会收到显示正确数据的警报，但在ddl中我看到4个选项：“更改...”和3个空白选项。检查显示值的元素不在那里。

知道我在搞乱语法吗？

Answer 1

想出来。我不确定为什么会这样，但我不得不改变以下内容：

在VM中：

var DropdownOrg = function (name, orgId) {
    this.name = name;
    this.orgId = orgId;
};

在页面上：

<select class="form-control"
        data-bind="options: $root.orgDdl, optionsText: 'name'"></select>

在get请求中（在VM中）：

 //pull initial data
$.getJSON(apiBaseUrl + "?userId=" + userId, function (data) {
    $.each(data, function () {
        var dropdownOrg = new DropdownOrg();
        var org = new Organization();
        $.each(this, function (k, v) {
            if (k == "UserGuid") {
                org.userGuid = v;
            }
            if (k == "OrgId") {
                dropdownOrg.orgId = v;
                org.orgId = v;
            }
            if (k == "OrgName") {
                dropdownOrg.name = v;
                org.orgName = v;
            }
            if (k == "IsHiring") {
                org.isHiring = v;
            }
            if (k == "Blurb") {
                org.blurb = v;
            }
        });
        self.orgDdl.push(dropdownOrg);
        self.orgs.push(org);
    });
});

在抛出一堆警告并且为一堆JSON进行描述后，我看到我的json对象中有一些名称与之不匹配。我以为我必须遵循我在DropDownOrg对象中设置的命名（我确实将其更改为匹配，但是看到旧的问题的原始问题），但事实证明这是基于我如何分配它的名称ajax get请求中的foreach循环。对我来说似乎很奇怪，所以如果有人想知道为什么会这样，请随意！

淘汰js下拉列表没有显示我在foreach内的约束力

1 个答案: