Cómo llamar a una función utilizando knockout.js al entrar se pulsa la tecla.. aquí está mi código de abajo.

ko.bindingHandlers.enterkey = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var inputSelector = 'input,textarea,select';
    $(document).on('keypress', inputSelector, function (e) {
        var allBindings = allBindingsAccessor();
        $(element).on('keypress', 'input, textarea, select', function (e) {
            var keyCode = e.which || e.keyCode;
            if (keyCode !== 13) {
                alert('a');
                return true;
            }

            var target = e.target;
            target.blur();

            allBindings.enterkey.call(viewModel, viewModel, target, element);
            alert('b');
            return false;
        });
    });
}
};
ko.applyBindings(viewModel);

HTML

<input type="text" data-bind="value:sendMessageText, enterkey: sendMessage" /> 

ViewModel

function contactsModel(){
    var self = this;
    self.jid=ko.observable();
    self.userName=ko.observable();
    self.sendMsgText=ko.observable();
    self.sendMessage = function(){
        if(self.sendMessageText() == '' )
            alert("Enter something in input field");
        else{
            var message = {
                to : self.userName(),
                message : self.sendMsgText()
            }
            self.sentMessages.push(message);
            sendMessage(message);
        }

     }
 }

Cualquier idea acerca de lo que está mal aquí o sugerencias para un mejor enfoque.

  • Puedes publicar el código para su viewModel? Mirando a los octavos de final de unión, se está a la espera de encontrar un método llamado sendMessage en perspective. Tu código jQuery para enlazar con el evento keypress puede estar en conflicto con esto.
  • Esta pregunta puede ofrecer una solución a su problema: stackoverflow.com/questions/4386311/…
  • he añadido viewmodel en cuestión ahora… pls comprobar.. gracias
  • sí me refería al enlace u siempre y similares enlaces relacionados también.. era de ninguna ayuda en mi caso becoz parece que hay algo que me estoy perdiendo aquí.. así que decidido a publicar una nueva pregunta.
InformationsquelleAutor Dave | 2014-04-15

5 Comentarios

  1. 62

    Cuando usted crea su propio knockout bindingHandler, se utiliza de la misma manera como los otros bindingHanlders por ejemplo: data-bind="text: myvalue"

    por lo que el código HTML se tendrá que buscar algo como esto

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

    Un importante enlace para agregar es el valueUpdate: 'afterkeydown' de unión. Sin esta unión cuando un usuario escribe texto en la entrada y golpea a entrar en el evento onblur no se levanta antes de enterkey de unión. Esto se traduce en la observables de devolver un valor inesperado y no el texto actual si el valor de entrada se accede en una acción invocada por enterKey.

    Otro Aspecto a medida Enlaces para KnockoutJS

    EDITAR

    Esto es lo que he utilizado anteriormente en otros proyectos.
    JsFiddle Demo

    ko.bindingHandlers.enterkey = {
        init: function (element, valueAccessor, allBindings, viewModel) {
            var callback = valueAccessor();
            $(element).keypress(function (event) {
                var keyCode = (event.which ? event.which : event.keyCode);
                if (keyCode === 13) {
                    callback.call(viewModel);
                    return false;
                }
                return true;
            });
        }
    };
    • estás en lo correcto.. traté de esto.. Pero no funciono. Usando jquery evento keypress para ahora.. Si cualquier otra solución mejor con knockout I .. Bienvenido
    • Actualizado pregunta con respecto a su respuesta.el problema persiste
    • ¿cómo es eso? hizo usted echa un vistazo a la jsFiddle Demo?
    • este código funcionó.. gracias
    • Se agregó información para valueUpdate: 'afterkeydown' para garantizar el comportamiento esperado
    • Gracias Chris por la actualización 🙂
    • El problema es que, en esta respuesta, la unión se denomina enterkey, pero dentro de las init que se busca executeOnEnter. línea 7 se debe allBindings.enterkey.call() en lugar de allBindings.executeOnEnter.call()
    • Gracias @HDog. Código fue originalmente executeOnEnter para el nombre de enlace. He actualizado para que sea consistente.
    • he tenido que añadir valueUpdate controlador de data-bind="value: organisationName, valueUpdate: 'input', executeOnEnter:initialize"
    • Agregar element.blur(); justo antes de allBindings.enterkey.call(viewModel); de llamada y de esa manera tu no arrinconada en la esquina de tener que especificar un valueUpdate. La adición de valueUpdate hace un montón de aplicaciones demasiado hablador si su hablar con el back-end a través de ajax.

  2. 91

    Sin necesidad de un enlace personalizado, sólo tiene que utilizar knockout del evento keypress(Knockout docs):

    <input type="text"
           data-bind="textInput : keyword, 
                      event: {keypress: onEnter}" >
    </input>

    Y su función:

    that.onEnter = function(d,e){
        e.keyCode === 13 && that.search();  
        return true;
    };

    JSFiddle ejemplo

    De EDICIÓN: Nuevo enlace de octavos de final(3.2.0) : textInput – evita la necesidad de tener un valueUpdate de unión.

  3. 10

    Esto funcionó para mí, gracias a @DaafVader para la mayoría de los de ella.

    a la vista

    <input data-bind="value: searchText, valueUpdate: 'input', event: { keyup: searchKeyUp }" />

    en viewmodel

    var searchKeyUp = function (d, e) {
        if (e.keyCode == 13) {
            search();
        }
    }
  4. 3

    Y esto funcionó para mí, gracias a @DaafVader.

    a la vista:

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

    en javascript:

    $("#myInput").keyup(function (event) {
            if (event.keyCode == 13) {
                search();
            }
    });

    A poner el evento keyup en sus eventos de jquery en lugar de knockout evento reducción de la complejidad de los octavos de final viewmodel.

  5. 2

    Utilizar el envío de unión (http://knockoutjs.com/documentation/submit-binding.html) en el formulario alrededor de su entrada, que es de lo que se hizo para.

    Ejemplo de los octavos de final docs:

    <form data-bind="submit: doSomething">
        ... form contents like inputs go here ...
        <button type="submit">Submit</button>
    </form>
    
    <script type="text/javascript">
        var viewModel = {
            doSomething : function(formElement) {
                //... now do something
            }
        };
    </script>

    También se encarga automáticamente de su botón, si es que hay uno.

Dejar respuesta

Please enter your comment!
Please enter your name here