Llamar a una función en la tecla enter pulse

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

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.
InformationsquelleAutor Nathan Fisher
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.

InformationsquelleAutor DaafVader

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();
    }
}

InformationsquelleAutor jacobsgriffith

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.

InformationsquelleAutor Luo Jiong Hui

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.

InformationsquelleAutor Mafii

5 Comentarios

Dejar respuesta Cancelar respuesta