我更新了你的小提琴,以展示一个更清晰的例子:
http://jsfiddle.net/JasonMore/s9Rmp/2/
这是我现在用于映射的实时代码片段。它可能会帮助您前进。DisplayViewModel 是最终被绑定的父视图模型。
// helpers
var dateConvert = {
create: function (options) {
return new Date(parseInt(options.data.substr(6)));
}
};
var viewModelConvert = function (viewModelType) {
return {
create: function (options) {
return new viewModelType(options.data);
}
}
};
// View Models
var layoutViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
this.ShowText = ko.computed(function () {
var val = self.ValueType();
return val !== contentType.Image && val !== contentType.Html;
});
};
var zoneViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data,
{
'Layouts': viewModelConvert(layoutViewModel)
}, this);
};
var presentationViewModel = function (data) {
var self = this;
// Mapping
ko.mapping.fromJS(data,
{
'Zones': viewModelConvert(zoneViewModel)
}, this);
};
var eventViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data,
{
'Presentations': viewModelConvert(presentationViewModel),
'EndDateTime': dateConvert,
'StartDateTime': dateConvert
}, this);
};
var fontViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, {}, this);
this.fontFace = ko.computed(function () {
return "@font-face {font-family: '" + self.Name() + "'; src:url('" + settings.fontUrl + self.FileName() + "')}";
});
};
var displayViewModel = function (data) {
var self = this;
this.init = function () {
};
ko.mapping.fromJS(data,
{
'Events': viewModelConvert(eventViewModel),
'Fonts': viewModelConvert(fontViewModel)
}, this);
};