web-dev-qa-db-fra.com

Appeler une fonction en appuyant sur la touche Entrée

Comment appeler une fonction en utilisant knockout.js lorsque la touche Entrée est enfoncée .. voici mon code ci-dessous.

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

     }
 }

Toute idée est sur ce qui ne va pas ici ou des suggestions pour une meilleure approche.

knockout.js
54
Dave

Lorsque vous créez votre propre knockout bindingHandler, il est utilisé de la même manière que les autres bindingHanlders, par exemple: data-bind="text: myvalue"

donc votre code HTML devra ressembler à ceci

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

Un lien important à ajouter est le valueUpdate: 'afterkeydown' contraignant. Sans cette liaison, lorsqu'un utilisateur tape du texte dans l'entrée et que l'utilisateur clique dessus, l'événement onblur n'est pas déclenché avant la liaison enterkey. Il en résulte que l'observable renvoie une valeur inattendue et non le texte actuel si la valeur de l'entrée est utilisée dans une action invoquée par enterKey.

n autre regard sur les liaisons personnalisées pour KnockoutJS

[~ # ~] éditer [~ # ~]
C’est ce que j’avais déjà utilisé pour d’autres projets. Démo JsFiddle

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;
        });
    }
};
62
Nathan Fisher

Pas besoin de liaison personnalisée, il suffit d'utiliser l'événement keypress de knockout ( documentation Knockout ):

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

Et votre fonction:

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

exemple JSFiddle

EDIT: Nouvelle liaison à partir de knockout (3.2.0): textInput - évite la nécessité d'avoir une liaison valueUpdate.

91
DaafVader

Cela a fonctionné pour moi, grâce à @DaafVader pour l'essentiel.

en vue

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

dans le modèle

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

Utilisez la liaison de soumission ( http://knockoutjs.com/documentation/submit-binding.html ) sur le formulaire autour de votre entrée, c'est pour quoi il est fait.

Exemple tiré de la documentation Knockout:

<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>

Il gère également automatiquement votre bouton s'il en existe un.

3
Mafii

Et cela a fonctionné pour moi, grâce à @DaafVader.

en vue:

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

en javascript:

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

Mettre l'événement keyup dans votre événement jquery au lieu d'un événement knock-out a réduit la complexité du modèle de visualisation knock-out.

3
Luo Jiong Hui