Après l'utilisation de knock-out pour un peu plus de temps, j'ai remarqué que le plugin de cartographie a quelques options supplémentaires que vous donner beaucoup plus de précision, le contrôle sur le processus de cartographie.
Contrôle du type et de la quantité de propriétés généré
Il y a plusieurs façons de le faire, et je vais aller sur quelques-uns, mais le résultat final est que vous vous retrouvez avec une version plus légère de la cartographie plugin parce que tout n'est pas observable.
Fondamentalement, vous laissez tout ce que vous ne pensez pas que va changer, comme une propriété classique et faire seulement observables de l', des éléments spécifiques que vous voulez observer.
Faire mapping
omettre certaines propriétés
Vous pouvez faire de la cartographie plugin omettre propriétés entièrement à partir de la fin résultat en spécifiant des choses comme ignore
ou include
. Ces deux accomplir la même chose, juste en face de moyens.
Remarque: les Échantillons sont de la knockout.js plugin de cartographie de la documentation, les commentaires ajoutés par moi
Plugin De Cartographie Argument: include
L'extrait de code suivant va omettre toutes les propriétés de l'objet source autres que celles qui sont passées par l' include
argument.
// 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);
Plugin De Cartographie Argument: ignore
Si vous voulez seulement omettre certaines propriétés de l'objet source, l'utilisation de l' ignore
argument comme indiqué ci-dessous. Il fera observables à partir de toutes les propriétés de l'objet source, sauf pour les propriétés spécifiées.
// 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);
Contrôle de quelles propriétés sont ou ne sont pas observables
Si vous avez besoin d'inclure des propriétés, mais vous ne pensez pas qu'ils doivent être faits observables (pour quelque raison que ce soit), la cartographie plugin a quelque chose qui peut aider.
Plugin De Cartographie Argument: copy
Si vous souhaitez que le plugin de cartographie de copier simplement la plaine de propriétés et de ne pas les rendre observables, l'utilisation de cet argument, comme indiqué ci-dessous.
// 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);
Prendre le contrôle complet sur le processus de cartographie
Si vous voulez avoir le contrôle à 100% sur ce qui est créé dans le processus de cartographie, notamment la possibilité de mettre des fermetures et des abonnements à vos objets, alors vous voulez utiliser l'option "créer".
plaine résultat avec des propriétés calculées
Voici un exemple où j'ai été de cartographie des données à partir d'un appel ajax vers un objet avec un results
de la propriété. Je ne voulais plus rien observables et je voulais juste un simple généré propriété qui pourrait être faite de l'autre simple, les propriétés sur l'objet. Peut-être pas la plus convaincante exemple, mais il montre la fonctionnalité.
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);
};
}
}
}
abonnements et de la fermeture et de la cartographie, oh mon
Une autre situation est que si vous voulez des fermetures et des abonnements dans votre suite. Cet exemple est trop long pour être inclus dans son intégralité, mais pour un véhicule de la marque/le modèle de la hiérarchie. Je voulais tous les modèles (les enfants) pour un faire (parent) à être non-activé si le modèle n'a pas activé et je voulais que cela soit fait avec un abonnement.
// 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);
};
}
};
Dans l'ensemble, ce que j'ai trouvé, c'est que vous aurez rarement besoin de 100% de l'objet que vous d passer pour le plugin et vous aurez rarement besoin de 100% de celui-ci pour être observable. Creuser avec la cartographie des options de configuration et de créer toutes sortes de complexes et de simples objets. L'idée est d'obtenir tout ce dont vous avez besoin, rien de plus ou de moins.