После небольшого использования Knockout я заметил, что плагин для отображения имеет несколько дополнительных опций, которые дают вам гораздо более детальный контроль над процессом отображения.
Тип управления и количество сгенерированных свойств
Есть несколько способов сделать это, и я расскажу о некоторых, но в итоге вы получите более легкий результат из плагина картирования, потому что все не наблюдается.
По сути, вы оставляете все, что, по вашему мнению, изменится, как обычное свойство и делаете наблюдаемые только из тех конкретных предметов, которые вы хотите наблюдать.
Сделать mapping опустить определенные свойства
Вы можете сделать так, чтобы плагин сопоставления полностью исключал свойства из конечного результата, указав такие вещи, как ignore или 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);
Плагин Mapping Argument: 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% его для наблюдения. Раскройте с настройками конфигурации сопоставления и создавать всевозможные сложные и простые объекты. Идея состоит в том, чтобы получить только все, что вам нужно, ничего более или менее.