Pregunta

Tengo una situación extraña. Básicamente, tengo dos enlaces personalizados que se utilizan para animar el elemento DOM a su nuevo valor. Estos son Awidth y Aright, que animan el ancho y los valores correctos respectivamente.

He implementado los enlaces como este:

<div class='classname' data-bind="aRight: right, aWidth: containerWidth, style: { zIndex: zindex, left: (left() + 'px'), height: (containerHeight() + 'px') }">

... y los enlaces personalizados se ven así:

            ko.bindingHandlers.aWidth =
            {
                update: function (element, valueAccessor, allBindingsAccessor, context)
                {
                    // Get the value accessor
                    var value = valueAccessor();

                    // Get the new width and the duration of the animation
                    var newWidth = ko.utils.unwrapObservable(value);
                    var duration = 500;

                    $(element).animate({ width: newWidth }, duration, "swing");
                }
            };

            ko.bindingHandlers.aRight =
            {
                update: function (element, valueAccessor, allBindingsAccessor, context)
                {
                    // Get the value accessor
                    var value = valueAccessor();

                    // Get the new width and the duration of the animation
                    var newRight = ko.utils.unwrapObservable(value);
                    var duration = 500;

                    $(element).animate({ right: newRight }, duration, "swing");

                    console.log("aRight Called: newRight - " + newRight + ", duration - " + duration);
                }
            };

Entonces, el problema surge cuando cambiamos un observable que no sea mis dos observables con límite personalizados, por ejemplo, Zindex.

Si cambiamos el Zindex observable, el valor se actualiza correctamente en el DOM, pero por alguna razón, ¡mi encuadernación bien también se activa! ...

¿No tengo ninguna referencia en mi encuadernación personalizada, así que seguramente no puede haber una dependencia?

Mi encuadernación correcta también se activa cuando mi encuadernación de inhalar también se activa, ¡lo cual también es un poco extraño!

¿Alguien tiene alguna idea acerca de esto?

¡Muchas gracias!

Andy.

Actualizar

Esta es la parte del modelo View que actualiza el índice, que cuando hace que mi encuadernación personalizada sea de fuego (esto es mucho psudo-código por cierto!):

    var page = function()
    {
        this.zindex = ko.observable(0);
        this.right = ko.observable(0);
        // and other observables....
    }

    var viewModel = function()
    {
        var pages = ko.oberservableArray();
        // populate the pages array etc...

        this.someMethod = function()
        {
            // Do some stuff...
            this.anotherMethod();
            // Do some other stuff
        }
        .bind(this);

        this.anotherMethod() = function
        {
            var pageCount = this.pages().length;
            for (var pageNum = 0; pageNum < pageCount; pageNum++)
            {
                var page = this.pages()[pageNum];
                page.zindex(/* a different value */); // This is what causes my aRight binding to fire...
            }
        }
        .bind(this);
    }

Actualizar

Acabo de leer una publicación aquí: http://groups.google.com/group/knockoutjs/browse_thread/thread/26a3157ae68c7aa5/44c96d1b748f63bbbbbbo?lnk=gst&q=Custom+Binding+FiRing

Dicho:

Además, una vinculación tendrá que su función de actualización se ejecuta nuevamente, si también se activa otro enlace en el mismo atributo de unión a datos.

¿Significa esto que lo que estoy viendo es que mi vinculación personalizada se está activando cuando se activa cualquier otro atributo de enlace en datos en Data (simplemente sucede que Zindex es el primero que veo el cambio)? ¿Esto no es un poco extraño/incorrecto? ...

Actualizar

Tengo un violín simple que creo que resume mi problema. ¡Parece que cualquier atributo vinculante en el mismo atributo de unión a datos, ya que tanto vinculación personalizada hará que se actualice!

http://jsfiddle.net/j6epx/2/

Hmmm ... ¡supongo que tendré que trabajar alrededor revisando manualmente mi encuadernación personalizada sobre si el valor ha cambiado o no! ¿Esto no derrota ese punto real de un vinculante?

También he publicado una pregunta más precisa en los foros de Knockout: http://groups.google.com/group/knockoutjs/browse_thread/thread/d2290d96e33f1d5a

¿Fue útil?

Solución

Esto es actualmente por diseño. Todos los enlaces en un enlace de datos se activan cuando se dispara cualquiera de los enlaces. Esto se debe a que todos están envueltos en una sola dependencia dependiente. En algunos casos, los enlaces tienen una dependencia entre sí (si se actualizan las opciones, entonces el valor debe ejecutarse para asegurarse de que todavía sea un valor válido). Sin embargo, en algunos casos, esto causa un problema.

Hay un patrón diferente que puede usar al crear un enlace personalizado que ayuda a mitigar este comportamiento. En lugar de definir las entrañas de su funcionalidad en la función "Actualizar", en realidad crearía su propio dependiente servible en la función "init". Se vería como:

ko.bindingHandlers.custBinding= {
    init: function(element, valueAccessor) {
        ko.dependentObservable({
            read: function() {
                ko.utils.unwrapObservable(valueAccessor());
                alert("custBinding triggered"); 
            },
            disposeWhenNodeIsRemoved: element
        });
    }
};

http://jsfiddle.net/rniemeyer/ukufy/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top