绑定另一个对象的下拉列表
Bind dropdown list of another object
我将通过描述期望的结果来开始我的问题:
我想构建一个输入表单以使用挖空 JS 发布到我的 API,但是我要输入的实体对象具有外键,因此我需要为外表中的所有选项提供一个选择选项。
课程视图模型
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();
});
我们得到的示例 JSON:
[
{
"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"
}
]
所以基本上我插入了一个课程,其中包括
名字
老师
房间
主题
开始时间
末日
我需要离开,并为数据库中的所有老师提供下拉列表,我还需要为房间和科目执行此操作。我为每个单独的实体提供了工作视图模型,没有依赖关系,因此我可以实际完成教师、房间和科目的所有 CRUD。
欢迎就如何实施这一点提出任何建议。
看起来你没有"我不能让它做我想做的事"之类的问题,而更多的是关于事物适合你的模型的心理障碍。因此,让我提出一种不同的心理方法。
您构建的是主数据对象的完整数据模型。但你的目标是构建一个应用程序,它将需要该数据模型,但还需要其他东西,所有这些都在其视图模型中。
视图模型完全由视图指定:您需要精确地实现视图将使用的一组内容。因此,首先编写带有数据绑定的 HTML。如果应用程序将具有需要房间列表的<select>
项,请继续假设视图模型中存在此类成员并进行绑定。
以这种方式布置应用程序后,您就完全指定了视图模型。您已经创建了一个需要实现的接口(所有视图模型成员(。应用程序(而不是数据(定义了视图模型。因此,从应用程序开始,将数据建模留给实现阶段。
相关文章:
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 在play2框架中向json对象添加下拉列表项
- 如何在用户返回和上一个按钮时刷新下拉列表
- 如何为下拉列表的每个选项添加一个属性
- 在Twitter BootStrap嵌套下拉列表中托管一个选择列表(IE 9特定)
- 如何使用jquery将所选项目从一个下拉组列表(optgroup)移动到另一个下拉列表(optgroup)
- 如何强制用户从下拉列表和按钮中选择一个值以启用保存按钮
- 在另一个下拉列表中的选择上切换下拉列表中选项的可见性
- 将onclick事件附加到具有一个元素的下拉列表中
- 引导程序在单击另一个下拉列表时关闭下拉列表
- 如何通过选择下拉列表中的选项从另一个 php 文件中获取数据
- 如何只制作一个下拉列表在单击时下拉
- 通过硒选择一个javascript下拉列表
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- 如何使用 asp.net 中的另一个下拉列表更改下拉列表选定的索引和可见性
- jQuery - 根据属性在所选选项之后的下拉列表中获取下一个选项的总值
- 从knockout.js中的下拉列表更新对象
- 绑定另一个对象的下拉列表
- 下拉列表显示[对象对象],而不是使用击倒值
- 在对象的javascript下拉列表中显示一个值