使用数据模型中的剔除填充选择下拉列表答案

【问题标题】：Populate Select Dropdown Using Knockout from Data Model使用数据模型中的剔除填充选择下拉列表
【发布时间】：2015-08-20 17:14:39
【问题描述】：

使用 Knockout.js 使用数据模型中的项目填充简单的下拉列表

<select name="selectCourseArea" class="form-control" data-bind="value: typeid"></select>

此时我只是试图从数据库中获取任何内容到下拉列表中，但没有成功。我不是代码的原始作者，所以我试图在没有任何先验知识或使用淘汰赛的情况下了解正在发生的事情。我需要在哪里将数据库信息从模型加载到控制器。 Knockout 代码是如何进入视图的？

var CourseViewModel = function (courseIn) {
var self = this;
if (courseIn === undefined) {
    courseIn = {};
}

self.id = courseIn.Id;
self.name = ko.observable(courseIn.Name);
self.postalCode = ko.observable(courseIn.PostalCode);
self.city = ko.observable(courseIn.City);
self.province = ko.observable(courseIn.Province);
self.courseId = ko.observable(courseIn.CourseId);
self.courseAreas = ko.observableArray();

$.each(courseIn.CourseAreas, function(index, courseArea) {
    self.courseAreas.push(new CourseAreaViewModel(courseArea));
});

self.newCourseArea = function () {
    var newArea = true;
    $.each(self.courseAreas(), function (index, obj) {
        console.log(obj.name());
        if ((obj.name() === undefined || obj.name() === null) || (obj.acreage() === null || obj.acreage() === 0)) {
            newArea = false;
        }
    });

    console.log(newArea);
    if (newArea) {
        $.ajax("/CourseArea/Add", {
            data: {
                courseId: self.id
            },
            dataType: "json",
            method: "post"
        }).done(function(newCourseArea) {
            console.log(newCourseArea);
            self.courseAreas.push(new CourseAreaViewModel(newCourseArea));
        });
    } else {
        alert("Please fill in the course area name and acreage before adding another!");
    }

}

self.deleteCourseArea = function (courseArea) {
    if (confirm("Are you sure you wish to delete this course area?")) {
        $.ajax("/CourseArea/Delete/" + courseArea.id, {
            method: "post",
            dataType:"json"
        }).done(function (feedback) {
            if (feedback.Success) {
                self.courseAreas.remove(courseArea);
            }
            alert(feedback.Message);
        });
    }
}
}

var CourseAreaViewModel = function(courseAreaIn) {
var self = this;
if (courseAreaIn === undefined) {
    courseAreaIn = {};
}
self.id = courseAreaIn.Id;
self.name = ko.observable(courseAreaIn.Name);
self.acreage = ko.observable(courseAreaIn.Acreage);
self.goals = ko.observable(courseAreaIn.Goals);
self.typeid = ko.observableArray(courseAreaIn.typeid);
}

【问题讨论】：

这个网站可能是一个更好的地方来询问codereview.stackexchange.com
感谢您的评论。当其他回复进来（或不）时，我会记住这一点

标签： javascript jquery asp.net-mvc knockout.js

【解决方案1】：

您需要将courseAreas 绑定到选择的选项，并且由于它由对象组成，因此您需要为文本和值组件指定键：

<select name="selectCourseArea" class="form-control" data-bind="options: courseAreas, optionsText: 'name', optionsValue: 'id', value: typeid"></select>

【讨论】：