He notado que no puedo conseguir algunos de los octavos de final en vivo tutoriales de trabajo o ejemplos básicos que deben demostrar los observables de enlace de datos.

Aquí está mi código:

<!DOCTYPE html> 
<html lang="en">

<html>
    <head>
        <meta charset="utf-8" />
        <title>Testing</title>
        <script type="text/javascript" src="knockout.js"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            function TestViewModel() {
                this.Name = ko.observable("Testing");
            }

            $(function() {
                ko.applyBindings(new TestViewModel());
            });
        </script>
    </head>

    <body>
        <h1>Testing Knockout.js</h1>
        <div>
            <div>
                <span data-bind="text: Name"></span>
            </div>
            <div>
                <input type="text" data-bind="value: Name"></input>
            </div>
        </div>
    </body>
</html>

Así que cuando abro el Google Chrome o Firefox, yo esperaría que el valor de la etiqueta span cambiar como puedo cambiar el texto en la entrada, sin embargo este no es el caso. Por favor alguien puede explicar por qué no? (Este código fue bastante copia de la documentación en el sitio web)

Gracias,
Alex.

  • El código parece y funciona bien: jsfiddle.net/FHGvy. ¿Qué versión de knock-out y jquery estás usando?

3 Comentarios

  1. 57

    Como de KO versión 3.2 (como Salvador Dalí respuesta señalado) debe utilizar la textinput enlace para actualizaciones instantáneas:

    <input data-bind="textInput: userName" />

    De que usted está utilizando una anterior Knockout versión y la value de unión, entonces usted debe hacer los siguientes cambios:

    Por defecto knock-out se actualiza el valor de las características observables en el evento de cambio (e.g cuando el enfoque del cuadro de texto se pierde).

    Si quieres actualización instantánea necesita especificar el valueUpdate opción donde los eventos posibles son: keyup, keypress, afterkeydown ver más info en el documentación.

    Para cambiar su value encuadernación:

    <input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>

    Demo JSFiddle.

    • Ah, así me siento tonto ahora, supuse que sería un insta-actualización y que hice algo mal.
    • usted no está solo. Yo también estaba sorprendido por la falta de actualización cuando se cambia el valor en el campo de entrada (y no unfocussing es). Se fue sobre todo gracias a esta muy bueno el video tutorial con Steve Sanderson que me imaginé que fuera lo suficientemente rápida como para no publicar la misma pregunta 😉
    • uso valueUpdate: ‘input’ para que se actualice en cualquier acción (pegar, arrastrar y soltar, campo claro, etc…)
    • afterkeydown no funciona de forma fiable en iOS 7, consulte github.com/knockout/knockout/issues/1118
    • Chicos, lea la siguiente respuesta así. textInput es la manera de resolver esto hoy.
    • usted salvó mi día. thx mucho. pero textInput parecen no funcionar. cualquier razón >?

  2. 20

    La aceptada respuesta es correcta, pero en un nuevo KO versión 3.2 añadieron textinput de unión. Así que en lugar de value de unión puede utilizar textInput:

    <input data-bind="textInput: userName" />

    Que hace dos cosas importantes:

    • hacer actualizaciones inmediatas
    • maneja navegador diferencias para el corte, arrastre, autocompletar …
    • Muchas gracias por esta nota! En casi todas partes en mi app he añadido valueUpdate para la actualización instantánea, esta nueva unión hace la vida más fácil.
  3. 0

    Para aquellos que deambulan de aquí (como yo) se preguntaba por qué no está funcionando. Ser conscientes de su extra ‘()’ uso. Esto me puso en problemas con un anidada observables como este:

    Malo:

    <input data-bind="textInput: subItem().userName()" />

    Bueno:

    <input data-bind="textInput: subItem().userName" />

Dejar respuesta

Please enter your comment!
Please enter your name here