javascript - example - knockoutjs-enlaces múltiples en el evento click

knockout select value binding

Question

Me gustaría saber si es posible crear enlaces múltiples en un evento en knockout.js

ejemplo:

<span data-bind="click: function1 function2, attr: {}"></span>

Answer 1

¿Qué tal el enlace simple personalizado 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);
        }
      }
    });
  }

};

Luego envuelves algo de HTML:

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

... y hacer un modelo:

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

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

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

Violín de trabajo: https://jsfiddle.net/hejdav/qmfem8t3/6/

Answer 2

EDITAR: accidentalmente utilicé MooTools typeOf () sin pensar. Fijo.

Esto es lo que se me ocurrió. Admito que es excesivo para la mayoría de las situaciones, pero la sintaxis es un poco más limpia en el lado de la plantilla:

Ver modelo:

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

y plantilla

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

Answer 3

Intenté esto en mi código y parece funcionar:

<button data-bind="click: viewMode.bind($data, ''view''), click: itemUpdate">

Answer 4

Tratar de usar

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