javascript - ejemplo - outerhtml

Cómo definir un ''enlace de opciones'' knockout personalizado con opciones predefinidas de Texto y Valor

Question

Un escenario típico en nuestro entorno es permitirle al usuario seleccionar una lista de opciones proporcionadas por el servidor (terminales, productos, ...), y luego presentar los datos solicitados.

Las opciones proporcionadas por el servidor están en Nombre, formato ID, y por lo tanto la siguiente construcción knockout se usa a menudo:

<select data-bind="options: serverOptions, optionsText: ''Name'', optionsValue: ''ID'', value: selectedOption>

Sería deseable crear un bindingHandler personalizado, llamado ''NamedIdOptions'' especificando optionsText y optionsValue en allBindingsAccessor () y luego redirigir al manejador de enlace de opciones estándar.

es decir

<select data-bind="NamedIdOptions: serverOptions, value: selectedOption"></select>

Previamente, he creado un controlador de enlace propio que completa las opciones yo mismo; sin embargo, preferiría usar el marco provisto por el manejador de enlace de opciones.

He intentado diferentes enfoques sin demasiado éxito: el enlace de opciones usa allBindings [''optionsValue''], y allBindings [''optionsText''] para acceder al valor, y parece que no tengo forma de configurarlos. (Me gustaría evitar el enfoque de applyBindingsToNode utilizado en y escribir algo como:

ko.bindingHandlers.NamedIdOptions = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel)
{
var allBindings = allBindingsAccessor();
allBindings.*FORCESET*("optionsText", "Name");
allBindings.*FORCESET*("optionsValue", "ID");
retun ko.bindingHandlers.options.init.apply(this, arguments);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel)
{
retun ko.bindingHandlers.options.update.apply(this, arguments);
}
}

Sin embargo, parece que no tengo ninguna posibilidad de establecer nada en los allBindings.

No tengo permitido usar

allBindings[''_ko_property_writers''][''optionsText'']("Name" );
allBindings[''_ko_property_writers''][''optionsValue'']("ID" );

Realmente preferiría evitar applyBindingsToNode en el constructo init como

Knockout: ¿es posible combinar enlaces de selección estándar con un enlace personalizado?

¿Alguien ahora acerca de una solución simple al problema?

Answer 1

De acuerdo, terminé usando enlaces de aplicación al nodo de todos modos:

ko.bindingHandlers.NamedIdOptions =
{
init: function (element, valueAccessor, allBindingsAccessor, viewModel)
{
var allBindings = allBindingsAccessor();
var newBindingOptions = { options: allBindings.NamedIdOptions, optionsText: "Name", optionsValue: "ID" };
delete allBindings.NamedIdOptions;
ko.utils.extend(newBindingOptions, allBindings);
ko.applyBindingsToNode(element, newBindingOptions, viewModel);
}
};

Y parece funcionar como se esperaba, estoy un poco inseguro sobre el valor y lasOpciones seleccionadas que tienen ''después'' establecido en las opciones. ¿Supongo que estoy a salvo cuando NamedIdOptions está listo antes del enlace de valor?

Answer 2

¿No puedes simplemente falsificar todo el parámetro allBindingsAccessor al reenviar la llamada?

update: function (element, valueAccessor, allBindingsAccessor, viewModel)
{
var allBindings = allBindingsAccessor(),
fakeAllBindingsAccessor = function () {
// I''ve used jQuery.extend here, you could also manually add the properties to the allBindings object
return $.extend(true, allBindings, {
optionsValue: ''ID'',
optionsText: ''Name''
};
};
return ko.bindingHandlers.options.init.call(this, element, valueAccessor, fakeAllBindingsAccessor, viewModel);
}

Editar: se agregó más código para combinar el allBindingsAccessor existente con los enlaces falsos manuales

Answer 3

Considere usar ko.applyBindingAccessorsToNode. Así es como comencé a hacerlo en KO 3.0:

ko.bindingHandlers.NamedIdOptions = {
init: function(element, valueAccessor, allBindingsAccessor)
{
var injectedBindingValues = {
options: valueAccessor,
optionsValue: function () { return "ID" },
optionsText: function () { return "Name" }
};
ko.applyBindingAccessorsToNode(element, injectedBindingValues);
//tell Knockout that we have already handled binding the children of this element
//
return { controlsDescendantBindings: true };
}
}

Puedes verlo en acción en este violín .

Nota: Por lo general, utilizo el esquema JSON enviado desde el servidor (C #, JSON.NET) para automatizar las opciones de llenado en la UI desde los atributos C # o los metadatos del esquema DB. Destilé mi código y lo cambié para que coincida con lo que hace el OP por la continuidad con la pregunta. Pero si hay algún interés en la técnica del esquema JSON, sírveme y puedo publicarlo.

Answer 4

Terminé con la siguiente solución, que también permite crear filtros simples y pendientes: utiliza un guión bajo para eso, pero eso es solo una cuestión de conveniencia:

// NamedIdOptions - is basically equal to the options binding - except, optionsText="Name", and "optionsValue=''ID''"
// The options can be filered - Specifying optionsFilter: {''FilterProp'' : ''valueToBeMatched'', ''FilterProp2'' : VMpropToMatch, .. }
// Definig optionsFilterCallback, registers a callback which will be invoked with the matched elements
// which can be used to turn off elements etc.
ko.bindingHandlers.NamedIdOptions =
{
init: function (element, valueAccessor, allBindingsAccessor, viewModel)
{
var allBindings = allBindingsAccessor(),
appliedValueAccesor = valueAccessor(),
shownOptions = appliedValueAccesor,
unwrap = ko.utils.unwrapObservable;
if (allBindings.optionsFilter)
{
shownOptions = ko.computed(function ()
{
// First - find all items to be presented in the list
var allItems = unwrap(appliedValueAccesor);
// Extract items to match against
// it is ensured that the computed observable dependts on all its sub properties
// All items are matched by key into an array
// if the match is null, undefined, or an empty array, it is not included int the match
var matchItems = {};
_.each(_.keys(allBindings.optionsFilter), function (key)
{
var observedValues = unwrap(allBindings.optionsFilter[key]);
if (!observedValues)
return;
if (!_.isArray(observedValues))
observedValues = [observedValues];
matchItems[key] = observedValues;
});
// Find items that match the items above - uses ko own routine to do so
var matchedItems = _.filter(allItems, function (elm)
{
return _.all(_.keys(matchItems), function (key)
{
var match = _.contains(matchItems[key], elm[key]);
return match;
});
});
// if a callback is defined - call it with the matched items
if (allBindings.optionsFilterCallback)
allBindings.optionsFilterCallback(matchedItems);
return matchedItems;
}, this);
}
// Change the binding options - the already handled items should not be reapplied to the node
// NOTE: it would be preferable to use ''ko.3.0->applyBindingAccessorsToNode'' instead of the hack below
// It assumes that the order of dictionaries are not changed - it works, but is not complient with the Ecmascript standard
var newBindingOptions = { options: shownOptions, optionsText: "Name", optionsValue: "ID" };
var bindingKeys = _.keys(allBindings);
var handledItems = _.first(bindingKeys, _.indexOf(bindingKeys, "NamedIdOptions") + 1);
_.each(handledItems, function (item)
{
delete allBindings[item];
});
_.extend(newBindingOptions, allBindings);
ko.applyBindingsToNode(element, newBindingOptions, viewModel);
}
};