我将通过描述预期结果来开始我的问题:
我想构建一个输入表单,使用knockout JS发布到我的API,但是我要输入的Entity对象有外键,所以我需要为外表中的所有选项提供一个select选项。
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"
}
]
基本上我正在插入一个由
组成的课程名称
教师
房间
主题
开始时间
结束时间
我需要离开,并为数据库中的所有教师提供下拉列表,我还需要为房间和主题做这个。我为每个没有依赖关系的单个实体工作View Models,因此我可以在教师,房间和主题上完成所有CRUD。
欢迎任何关于如何实现这一点的建议。
答案 0 :(得分:0)
看起来你没有"我无法做到我想做的事情"问题,但更多的是关于事物适合你的模型的心理障碍。所以,让我建议一种不同的心理方法。
您构建的是主数据对象的全面数据模型。但是你的目标是构建一个应用程序,它需要这个数据模型,还有其他东西,都在它的视图模型中。
视图将完全指定为viewmodel:您需要完全实现视图将使用的一组内容。首先,编写带有数据绑定的HTML。如果您的应用程序将有一个需要房间列表的<select>
项目,请继续并假设您的视图模型中存在这样的成员并进行绑定。
以这种方式布置应用程序后,您已完全指定了viewmodel。您已经创建了一个需要实现的接口(所有viewmodel成员)。应用程序 - 而不是数据 - 定义了视图模型。因此,从应用程序开始,将数据建模留给实现阶段。