如何自定义嵌套模型中的基因剔除映射创建? [英] How do I customize knockout mapping creation in nested model?
问题描述
对Knockout来说是完全陌生的，我正在尝试使用敲除映射插件将JSON响应从服务器映射到特定模型.模型是嵌套的，即使在嵌套模型中，我也尝试使用create回调覆盖对象构造.但是，似乎没有正确读取我的映射选项. JSON示例:
Completely new to Knockout and I am trying to map a JSON response from the server to specific models using the knockout mapping plugin. The models are nested and I'm trying to override object construction using the create callback even in the nested models. However, it doesn't appear that my mapping options are being read properly. Example JSON:
{
"EmployeeFeedbackRequestSubmissions": [
{
"EmployeeFeedbackRequestSubmissionId": 0,
"Employee": "John Smith0",
"EmployeesWorkedWith": [
{
"EmployeeName": "Joe Smith",
"ProjectsWorked": [
{
"ProjectName": "Document Management Console"
},
{
"ProjectName": "Performance Eval Automation"
},
{
"ProjectName": "Business Tax Extensions"
}
]
},
{
"EmployeeName": "Michael Jones",
"ProjectsWorked": [
{
"ProjectName": "Document Management Console"
},
{
"ProjectName": "Performance Eval Automation"
},
{
"ProjectName": "Business Tax Extensions"
}
]
},
{
"EmployeeName": "Jason Smith",
"ProjectsWorked": [
{
"ProjectName": "Document Management Console"
},
{
"ProjectName": "Performance Eval Automation"
},
{
"ProjectName": "Business Tax Extensions"
}
]
},
{
"EmployeeName": "Robert Will",
"ProjectsWorked": [
{
"ProjectName": "Document Management Console"
},
{
"ProjectName": "Performance Eval Automation"
},
{
"ProjectName": "Business Tax Extensions"
}
]
}
]
}
// more EmployeeFeedbackRequestSubmissions
]
}
映射选项:
var mappingOptions = {
// overriding default creation/initialization code
'EmployeeFeedbackRequestSubmissions': {
create: function (options) {
return (new(function () {
this.EmployeeHeading = ko.computed(function () {
return "Performance Evaluation Employee: " + this.Employee();
}, this);
ko.mapping.fromJS(options.data, {}, this);
})());
},
'EmployeesWorkedWith': {
create: function (options) {
return new instance.EmployeesWorkedWithModel(options.data);
}
}
}
};
使用完整示例对小提琴进行采样: http://jsfiddle.net/jeades/9ejJq/2/
Sample fiddle with full example: http://jsfiddle.net/jeades/9ejJq/2/
结果应该是能够使用从EmployeesWorkedWithModel计算出的nameUpper的能力.我也乐于接受有关执行此操作的更好方法的建议，因为这可能不是解决此问题的最佳方法.
The result should be the ability to use the computed nameUpper from the EmployeesWorkedWithModel. I'm also open to suggestions about a better way to do this as this may not be the best way to handle this.
推荐答案
您快到了.直接起作用: http://jsfiddle.net/jiggle/na93A/
You were almost there. Straight to it working: http://jsfiddle.net/jiggle/na93A/
不需要嵌套mappings选项对象，当您将其传递给ko.mapping.fromJSON
The mappings options object doesn't need to be nested, the mapping plug in will look up the mapping from the name, when you pass them to ko.mapping.fromJSON
因此，您的映射选项对象应为单一级别:
So your mapping options object should be single level:
var self = this;
self.mappingOptions = {
// overriding default creation/initialization code
'EmployeeFeedbackRequestSubmissions': {
create: function (options) {
return (new(function () {
this.EmployeeHeading = ko.computed(function () {
return "Performance Evaluation Employee: " + this.Employee();
}, this);
ko.mapping.fromJS(options.data, self.mappingOptions, this);
})());
}
},
'EmployeesWorkedWith': {
create: function (options) {
// return new instance.EmployeesWorkedWithModel(options);
return (new(function(){
ko.mapping.fromJS(options.data, {}, this);
this.nameUpper = ko.computed(function () {
return this.EmployeeName().toUpperCase();
}, this);
})());
}
}
};
注意，我已经使用"self"作为对"this"而不是"instance"的本地引用，只是为了使代码更易于阅读(就像您在主视图模型中使用"instance"一样).
Notice I have used "self" as your local reference to 'this' instead of 'instance', just to make the code easier to read (as you used 'instance' in the main viewmodel).
我还使了mappingOptions对象成为FeedbackViewModel的一部分，因为我们需要将其传递到mapping.fromJS调用中，因此当它在数据中看到"EmployeesWorkedWith"级别时，将为其具有mappingOptions.
I have also made the mappingOptions object part of the FeedbackViewModel, as we need to pass this into the mapping.fromJS call so when it sees the 'EmployeesWorkedWith' level in the data it will have the mappingOptions for it.
发件人:
ko.mapping.fromJS(options.data, {}, this);
收件人:
ko.mapping.fromJS(options.data, self.mappingOptions, this);
然后，您可以将"EmployeesWorkedWith"级别的创建代码移动到创建中(可以调用一个函数，但是如上所述，我将其保留在mappingOptions中，就像您创建"EmployeeFeedbackRequestSubmissions"级别的方式一样
You can then move your creation code for 'EmployeesWorkedWith' level into the create (you could call a function, but I've kept it together in the mappingOptions as shown above, like the way you were creating the 'EmployeeFeedbackRequestSubmissions' level.
然后可以完全删除实例.EmployeesWorkedWithModel函数.
You can then get rid of the instance.EmployeesWorkedWithModel function altogether.
在这里可以找到有效的小提琴:
A working fiddle can be found here:
http://jsfiddle.net/jiggle/na93A/
或者，您可以在创建"EmployeeFeedbackRequestSubmissions"时创建单独的mappingOptions对象，并且在一个对象中没有所有级别的映射，这可以在此提琴琴中看到
Alternatively, you could create separate mappingOptions object when you are in the create for 'EmployeeFeedbackRequestSubmissions' and not have the mappings for all levels in one object, which can be seen in this fiddle http://jsfiddle.net/jiggle/Avam7/
取决于您喜欢的编码方式，如果您对不同级别的映射需求不同并且它们具有相同的集合名称，则将它们分开很重要.
Depends on your coding style which way you prefer, and would be important to separate them out if you had different mapping needs for different levels and they had the same collection name.
例如
员工
员工
员工(在此级别上，您可能需要不同的计算机等)
Employees (you might need different computeds, etc. at this level)
如果是这样，您将使用第二个选项(将mappingOptions分开并传递到将使用它的级别)
If so, you would use the second option (separate the mappingOptions and pass to the level that will use it)
我在小提琴中添加了一些console.log语句，以便您可以在控制台中运行代码时看到值，这将有助于了解其工作方式.
I've added some console.log statements to the fiddles so you can see values as the code runs in the console, which will help to understand how it's working.
希望有帮助.
这篇关于如何自定义嵌套模型中的基因剔除映射创建?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
