Javascript 绑定另一个对象的下拉列表

我将从描述期望的结果开始我的问题：

我想构建一个输入表单，使用knockout JS发布到我的API，但是我想输入的实体对象有外键，所以我需要为外键表中的所有选项提供一个select选项

课程视图模型 我们得到的示例： 因此，本质上我插入了一节课，包括

名称
教师
房间
主题
开始时间
结束时间

我需要离开，为数据库中的所有教师提供下拉列表，我还需要为教室和科目提供下拉列表。我为每个单独的实体建立了工作视图模型，没有依赖关系，因此我可以实际完成教师、教室和科目的所有CRUD

---

任何关于如何实现这一点的建议都是受欢迎的。

看起来你没有“我不能让它做我想做的事情”之类的问题，但更多的是关于在你的模型中适合什么东西的思想障碍。因此，让我建议一种不同的思维方式

您所构建的是一个完整的主数据对象数据模型。但是您的目标是构建一个应用程序，它不仅需要该数据模型，而且还需要其他东西，都在它的viewmodel中

viewmodel完全由视图指定：您需要精确地实现视图将使用的一组内容。因此，从编写带有数据绑定的HTML开始。如果您的应用程序将有一个

项需要一个文件室列表，只需继续并假设您的视图模型中存在这样的成员，然后进行绑定

---

以这种方式布置应用程序后，就完全指定了viewmodel。您已经创建了需要实现的接口（所有viewmodel成员）。应用程序（而不是数据）定义viewmodel。因此，从应用程序开始，将数据建模留待实现阶段。

看起来您没有“我不能让它做我想做的事情”之类的问题，但更多的是关于模型中的内容的思维障碍。因此，让我建议一种不同的思维方式

您所构建的是一个完整的主数据对象数据模型。但是您的目标是构建一个应用程序，它不仅需要该数据模型，而且还需要其他东西，都在它的viewmodel中

viewmodel完全由视图指定：您需要精确地实现视图将使用的一组内容。因此，从编写带有数据绑定的HTML开始。如果您的应用程序将有一个

项需要一个文件室列表，只需继续并假设您的视图模型中存在这样的成员，然后进行绑定

---

以这种方式布置应用程序后，就完全指定了viewmodel。您已经创建了需要实现的接口（所有viewmodel成员）。应用程序（而不是数据）定义viewmodel。因此，从应用程序开始，将数据建模留待实现阶段。

您需要一个数组（可能是可观察的），用于每个您想要下拉的内容。所有老师的名单，所有房间的名单，所有科目的名单。你能理解吗？@RoyJ我如何将其构建到视图模型中？

lessonRegisterViewModel.teachers:ko.observableArray（）

似乎是合理的。你需要一个数组（可能是可观察的）用于你想要下拉的每一件事情。所有老师的名单，所有房间的名单，所有科目的名单。你能理解吗？@RoyJ我如何将其构建到视图模型中？

lessonRegisterViewModel.teachers:ko.observableArray（）

似乎很合理。

var lessonRegisterViewModel;

function Lesson(id, name, teacher, room, subject, startTime, endTime) {
    var self = this;
    self.Id = ko.observable(id);
    self.Name = ko.observable(name);
    self.Teacher = ko.observable(teacher);
    self.Room = ko.observable(room);
    self.Subject = ko.observable(subject);
    self.StartTime = ko.observable(startTime);
    self.EndTime = ko.observable(endTime);
    self.addLesson = function() {
        var dataObject = ko.toJSON(this);
        $.ajax({
            url: '/api/Lessons',
            type: 'post',
            data: dataObject,
            contentType: 'application/json',
            success: function(data) {
                lessonRegisterViewModel.lessonListViewModel.lessons.push(new Lesson(data.Id, data.Name, data.Teacher, data.Room, data.Subject, data.StartTime, data.EndTime));
                self.Id(null);
                self.Name('');
                self.Teacher('');
                self.Room('');
                self.Subject('');
                self.StartTime('');
                self.EndTime('');
            }
        });
    }
}

function LessonList() {
    var self = this;
    self.lessons = ko.observableArray([]);
    self.getLessons = function() {
        self.lessons.removeAll();
        $.getJSON('/api/Lessons', function(data) {
            $.each(data, function(key, value) {
                self.lessons.push(new Lesson(value.id, value.name, value.teacher, value.room, value.subject, value.startTime, value.endTime));
                console.log(self);
            });
        });
    };
    self.removeLesson = function(lesson) {
        $.ajax({
            url: '/api/Lessons/' + lesson.Id(),
            type: 'delete',
            contentType: 'application/json',
            success: function() {
                self.lessons.remove(lesson);
            }
        });
    }
}
lessonRegisterViewModel = {
    addLessonViewModel: new Lesson(),
    lessonListViewModel: new LessonList()
};
$(document).ready(function() {
    // bind view model to referring view
    ko.applyBindings(lessonRegisterViewModel);
    // load lesson data
    lessonRegisterViewModel.lessonListViewModel.getLessons();
});

[  
 {  
  "id":1,
  "name":"Lesson 1",
  "teacher":{  
     "id":3,
     "firstName":"Sophie",
     "lastName":"Adams",
     "emailAddress":"teacher3@foo.com"
  },
  "classroom":{  
     "id":1,
     "name":"Great Hall"
  },
  "subject":{  
     "id":4,
     "name":"jQuery"
  },
  "startTime":"2016-02-10T09:30:00",
  "endTime":"2016-02-10T10:30:00"
},
{  
  "id":2,
  "name":"Lesson 2",
  "teacher":{  
     "id":4,
     "firstName":"Tristan",
     "lastName":"Sanchez",
     "emailAddress":"teacher4@foo.com"
  },
  "classroom":{  
     "id":2,
     "name":"Room 1A"
  },
  "subject":{  
     "id":3,
     "name":"SQL"
  },
   "startTime":"2016-02-10T09:00:00",
  "endTime":"2016-02-10T10:30:00"
}
]