在使用 Knockout 一段时间后,我注意到映射插件有一些额外的选项,可以让您对映射过程进行更精细的控制。
控制生成的属性的类型和数量
有几种方法可以实现这一点,我将介绍一些方法,但最终结果是您最终会从映射插件中得到更轻的结果,因为一切都是不可观察的。
基本上,您将所有您认为不会改变的东西都保留为正常属性,并且仅从您想要观察的特定项目中制作可观察对象。
省略mapping
某些属性
您可以通过指定诸如ignore
or之类的内容,使映射插件从最终结果中完全省略属性include
。这两者都完成了同样的事情,只是以相反的方式。
注意:示例来自knockout.js 映射插件文档,注释由我添加
映射插件参数:include
以下代码段将省略源对象中的所有属性,而不是通过include
参数传入的属性。
// specify the specific properties to include as observables in the end result
var mapping = {
// only include these two properties
'include': ["propertyToInclude", "alsoIncludeThis"]
}
// viewModel will now only contain the two properties listed above,
// and they will be observable
var viewModel = ko.mapping.fromJS(data, mapping);
映射插件参数:ignore
如果您只想从源对象中省略某些属性ignore
,请使用如下所示的参数。它将从源对象中除指定属性之外的所有属性中生成可观察对象。
// specify the specific properties to omit from the result,
// all others will be made observable
var mapping = {
// only ignore these two properties
'ignore': ["propertyToIgnore", "alsoIgnoreThis"]
}
// viewModel will now omit the two properties listed above,
// everything else will be included and they will be an observable
var viewModel = ko.mapping.fromJS(data, mapping);
控制哪些属性是可观察的或不可观察的
如果您需要包含属性,但您认为不需要将它们设为可观察(无论出于何种原因),映射插件可以提供帮助。
映射插件参数:copy
如果您希望映射插件简单地复制普通属性而不使它们可观察,请使用此参数,如下所示。
// tell the mapping plugin to handle all other properties normally,
// but to simply copy this property instead of making it observable
var mapping = {
'copy': ["propertyToCopy"]
}
var viewModel = ko.mapping.fromJS(data, mapping);
完全控制映射过程
如果您想 100% 控制在映射过程中创建的内容,包括在对象中放置闭包和订阅的能力,那么您需要使用“创建”选项。
具有计算属性的普通结果
这是一个示例,我将 ajax 调用中的数据映射到具有results
属性的对象。我不想要任何可观察的东西,我只想要一个简单的生成属性,该属性将由对象上的其他简单属性组成。也许不是最引人注目的例子,但它展示了功能。
var searchMappingConfig = {
// specific configuration for mapping the results property
"results": {
// specific function to use to create the items in the results array
"create": function (options) {
// return a new function so we can have the proper scope/value for "this", below
return new function () {
// instead of mapping like we normally would: ko.mapping.fromJS(options.data, {}, this);
// map via extend, this will just copy the properties from the returned json element to "this"
// we'll do this for a more light weight vm since every last property will just be a plain old property instead of observable
$.extend(this, options.data);
// all this to add a vehicle title to each item
this.vehicleTitle = this.Year + "<br />" + this.Make + " " + this.Model;
}, this);
};
}
}
}
订阅、关闭和映射,哦,我的
另一种情况是,如果您希望结果中有闭包和订阅。此示例太长,无法完整包含,但它适用于车辆制造商/型号层次结构。如果模型未启用,我希望给定品牌(父)的所有模型(子)都未启用,并且我希望通过订阅来完成。
// here we are specifying the way that items in the make array are created,
// since makes has a child array (Models), we will specify the way that
// items are created for that as well
var makesModelsMappingConfig = {
// function that has the configuration for creating makes
"create": function (options) {
// return a new function so we can have the proper
// scope/value for "this", below
return new function () {
// Note: we have a parent / child relationship here, makes have models. In the
// UI we are selecting makes and then using that to allow the user to select
// models. Because of this, there is going to be some special logic in here
// so that all the child models under a given make, will automatically
// unselect if the user unselects the parent make.
// make the selected property a private variable so it can be closure'd over
var makeIsSelected = ko.protectedComputed(false);
// expose our property so we can bind in the UI
this.isSelected = makeIsSelected;
// ... misc other properties and events ...
// now that we've described/configured how to create the makes,
// describe/configure how to create the models under the makes
ko.mapping.fromJS(options.data, {
// specific configuration for the "Models" property
"Models": {
// function that has the configuration for creating items
// under the Models property
"create": function (model) {
// we'll create the isSelected as a local variable so
// that we can flip it in the subscription below,
// otherwise we wouldnt have access to flip it
var isSelected = ko.protectedComputed(false);
// subscribe to the parents "IsSelected" property so
// the models can select/unselect themselves
parentIsSelected.current.subscribe(function (value) {
// set the protected computed to the same
// value as its parent, note that this
// is just protected, not the actual value
isSelected(value);
});
// this object literal is what makes up each item
// in the Models observable array
return {
// here we're returning our local variable so
// we can easily modify it in our subscription
"isSelected": isSelected,
// ... misc properties to expose
// under the item in the Model array ...
};
}
}
}, this);
};
}
};
总而言之,我发现你很少需要 100% 的对象传递给插件,而且你很少需要 100% 的对象是可观察的。深入研究映射配置选项并创建各种复杂和简单的对象。这个想法是只得到你需要的一切,不多也不少。