私は Knockout.js を初めて使用し、作業履歴に基づいて複雑なオブジェクトを作成しようとしています。
私は現在、データを渡すことができます従業員は、経験などを持つプロジェクトを持つポジションを持っています。データを渡して子オブジェクトを設定することはできますが、やりたいことは自分のメソッドとcomputedObservablesをアタッチできるように、子オブジェクトを手動で作成します。他のオブジェクトをどのように接続すればよいかわかりません。for each ループを作成する必要がありますか、それともこれを簡単にするための気の利いたノックアウト マジックがありますか?
ご指導いただければ幸いです。
Namespace.viewModel = function (model) {
console.log('initViewCalled');
var memberVM = {
Id: ko.observable(model.Id),
FName: ko.observable(model.FName),
LName: ko.observable(model.LName),
Positions: ko.observableArray(model.Positions),
};
// computed goodness goes here
memberVM.FullName = ko.computed(function () {
return this.FName() + ' ' + this.LName();
}, memberVM);// methods
this.addPosition = function () {
this.Positions.push({MemberId:this.MemberId });
} .bind(this);
return memberVM;
};
Namespace.position = function (model) {
var positionVM = {
EndDate: ko.observable(model.EndDate),
Description: ko.observable(model.Description),
HoursPerWeek: ko.observable(model.HoursPerWeek),
HourlyRate: ko.observable(model.HourlyRate),
MaxDate: ko.observable(model.MaxDate),
MinDate: ko.observable(model.MinDate),
MemberId: ko.observable(model.Id),
Name: ko.observable(model.Name),
PositionId: ko.observable(model.Id),
Summary: ko.observable(model.Summary),
SalaryEnd: ko.observable(model.SalaryEnd),
SalaryStart: ko.observable(model.SalaryStart),
StartDate: ko.observable(model.StartDate),
Title: ko.observable(model.Title),
Projects: ko.observableArray(model.Projects), // automapped...
};
this.addProject = function () {
this.Projects.push({ MemberId: this.MemberId });
} .bind(this);
return positionVM;
};
Namespace.project = function(model) {
var projectVM = {
EndDate: ko.observable(model.EndDate),
Description: ko.observable(model.Description),
MemberId: ko.observable(model.Id),
Name: ko.observable(model.Name),
PositionId: ko.observable(model.Id),
StartDate: ko.observable(model.StartDate),
Experiences: ko.observableArray(model.Experiences) // auto-mapped
};
this.addExperience = function () {
this.Experiences.push("New Experience");
}.bind(this);
return projectVM;
};