javascript - KnockoutJS valor de conmutación en enlace de datos

knockout.js

Question

Tengo un poco de javascript:

function ViewModel() {
    var self = this;
    self.highlight = ko.observable(true);   
}

ko.applyBindings(new ViewModel());

Y el html que lo complementa:

<div data-bind="css: { highlighted: highlight }, click: highlight( !highlight() )">
    random string
</div>

Lo que estoy tratando de lograr:

1. La clase css ''resaltada'' solo se activará cuando var highlight sea verdadero
2. Al hacer clic en el div, se alternará el valor bool de var highlight
3. Resultado deseado: hacer clic en el div para activar / desactivar su clase css

Lo que estoy recibiendo:

1. El valor inicial de resaltado es true , sin embargo, la clase css comienza desactivada (si cambio el valor inicial a false , la clase css se activa: lo cual parece como si de alguna manera hubiera activado el enlace de clic cuando todavía no había hecho clic en nada) )
2. La clase css de la div no cambia al hacer clic

Prefiero no hacer una nueva función de clic correspondiente dentro de ViewModel. Estoy buscando, si es posible, un poco de código que pueda colocar únicamente en línea dentro del enlace de datos.

Aquí está el código en JSFiddle: http://jsfiddle.net/4wt4x/1/

¿Alguien puede explicar qué está pasando y qué estoy haciendo incorrectamente?

Answer 1

Otra opción es usar una extensión de función personalizada reutilizable (la función personalizada se usa en lugar del extensor porque no hay parámetros y se ve más limpia):

ko.observable.fn.toggleable = function () {
    var self = this;
    self.toggle = function () {
        self(!self());
    };

    return self;
};

Uso

self.highlight = ko.observable(true).toggleable(); 

Html

<div data-bind="css: { highlighted: highlight }, click: highlight.toggle">
    random string
</div>

Answer 2

Sé que es una vieja pregunta, pero tal vez podría ayudar a alguien. Si necesita usar la palanca en muchos lugares, tal vez un poco de azúcar de encuadernación personalizada podría ayudarlo a:

Unión:

ko.bindingHandlers.toggleClick = {
    init: function (element, valueAccessor) {
        var value = valueAccessor();

        ko.utils.registerEventHandler(element, "click", function () {
            value(!value());
        });
    }
};

Uso:

<div data-bind="css: { highlighted: highlight }, toggleClick: highlight">
    random string
</div>

Ejemplo:

http://jsfiddle.net/A28UD/1/

Este enfoque mantiene algunas de mis opiniones muy limpias. Espero eso ayude.

Answer 3

Si realmente quieres hacerlo en línea:

<div data-bind="click: highlight.bind($root, !highlight()), css: { highlighted: highlight } ">
    random string
</div>

donde resaltar es el observable booleano.

Answer 4

Su click: highlight( !highlight() ) es incorrecto. Click intentará ejecutar una función, y cuando se inicializó el enlace, el resaltado habría devuelto el valor que tenía y eso es lo que el click intentará ejecutar ( true o false en su caso). Necesitas hacer algo como esto:

En su javascript, coloque en su modelo:

self.toggleHighlight = function () { self.highlight(!self.highlight()) };

Luego cambia el enlace para decir click: toggleHighlight

Como así: http://jsfiddle.net/KDypD/1/

Es posible que deba ajustar su valor inicial de resaltado también para reflejar cómo desea que se muestre la página inicialmente.