web-dev-qa-db-fra.com

knockoutjs - plusieurs liaisons sur un événement de clic

Je voudrais savoir s'il est possible de créer plusieurs liaisons sur un événement dans knockout.js

exemple:

<span data-bind="click: function1 function2, attr: {}"></span>
javascriptjavascript-eventsknockout.js
28
Safari

Essayez d'utiliser

<span data-bind="click: function() { function1(); function2() }"></span>
52
Vladimir Posvistelik

EDIT: J'ai accidentellement utilisé les MooTools typeOf () sans réfléchir. Fixé.

Voici ce que j'ai trouvé. J'avoue que c'est exagéré pour la plupart des situations, mais la syntaxe est un peu plus propre du côté du modèle:

Voir le modèle:

var ViewModel = new function() {
    this.call = function(functions,args) {
        if (!(functions instanceof Array))
            functions = [functions];
        if (!(args instanceof Array))
            args = [args];

        return function() {
            for (var i = 0, l = functions.length; i < l; i++) {
                functions[i].apply(this,args);
            }
        }
    }

    this.testValue=ko.observable('Click me!');
    this.click1 = function(foo) {
        this.testValue('click1 ' + foo);
        alert(1);
    }
    this.click2 = function(foo) {
        this.testValue('click2 ' + foo);
        alert(2);
    }
}

et modèle

<span data-bind="click:call([click1,click2],['Test value'])">Test span</span>
2
jpeltoniemi

Comment créer une liaison simple personnalisée clickArray:

ko.bindingHandlers.clickArray = {

  init: function (element, valueAccessor) {
    var handlers = valueAccessor();

    ko.applyBindingsToNode(element, {
      click: function () {
        for (var i = 0; i < handlers.length; i++) {
          handlers[i].apply(this, arguments);
        }
      }
    });
  }

};

Ensuite, vous enveloppez du HTML:

<div id="foo">
  <a data-bind="clickArray: [bar, baz]">Click</a>
</div>

… Et faites un modèle:

var viewModel = {
    bar: function () {
      alert('Bar!');
    },

    baz: function () {
      alert('Baz.');
    }
  }
}

ko.applyBindings(viewModel, document.getElementById('foo'));

Violon de travail: https://jsfiddle.net/hejdav/qmfem8t3/6/

1
hejdav