knockout.js - data - ¿Cómo extender los observables knockout para leer el valor predeterminado de enlace?

ko if

Question

Finalmente he encontrado el tiempo para comenzar a aprender KnockoutJS mientras se construye una nueva aplicación MVC4. Estoy tratando de descubrir la mejor manera de inicializar un valor observable a partir de un valor predeterminado que ya está establecido en la vista.

Este es un ejemplo artificial, pero me gustaría presentar un valor predeterminado para un observable directamente a la vista de la siguiente manera:

<input type="hidden"
value="@Model.SomeValue"
data-bind="value: myObservableReference"/>

Sé que un valor predeterminado normalmente se inicializa a través de:

model.myObservableReference = ko.obervable("SomeValue");

Sin embargo, me gustaría encontrar una manera de extender la inicialización de manera que:

model.myObservableReference = ko.obervable();

leería el valor existente del enlace si existe un valor.

Como hasta ahora he logrado mantener mi código KnockoutJS completamente inconsciente del mundo de las maquinillas de afeitar, quiero evitar el descuido de:

model.myObservableReference = ko.obervable(@Model.SomeValue);

Supongo que esto se manejaría a través de un extensor o una carpeta personalizada, pero si alguien pudiera apuntarme en la dirección correcta sería muy apreciado.

Answer 1

Para los usuarios de Google, aquí está el código para extender el enlace initializeValue a un cuadro de selección así como a los cuadros de entrada.

ko.bindingHandlers.initializeValue = {
init: function(element, valueAccessor) {
if (element.getAttribute(''value'')) {
valueAccessor()(element.getAttribute(''value''));
} else if (element.tagName === ''SELECT'') {
valueAccessor()(element.options[element.selectedIndex].value);
}
},
update: function(element, valueAccessor) {
var value = valueAccessor();
element.setAttribute(''value'', ko.utils.unwrapObservable(value));
}
}

NOTA: el enlace initializeValue debe aparecer antes del enlace de valor en el atributo de enlace de datos de su selección o no funcionará.

<select data-bind=''initializeValue: layout_id, value: layout_id, options: layouts, optionsText: "text", optionsValue: "id"''></select>

Answer 2

Puede intentar crear su propio controlador de enlace personalizado para lograr esto:

ko.bindingHandlers.initializeValue = {
init: function(element, valueAccessor) {
valueAccessor()(element.getAttribute(''value''));
},
update: function(element, valueAccessor) {
var value = valueAccessor();
element.setAttribute(''value'', ko.utils.unwrapObservable(value))
}
};
<input type="hidden" value="@Model.SomeValue"
data-bind="initializeValue:myObservableReference, value: myObservableReference"/>