backbone.js - source - underscore js download

Backbone dispara dos métodos en un evento

Question

Estoy usando Backbone y tengo una vista con eventos definidos:

 ....
events: {
''click .search-button'': ''setModelTerm'',
''change .source-select'': ''setModelSourceId'',
''change .source-select'': ''activateSource''
},
....

Me gustaría activar dos métodos cuando se dispare el evento change .source-select . El problema es que la última entrada en el objeto de evento anula la entrada anterior.
¿Cómo puedo activar dos métodos en un evento?
(Estoy tratando de evitar escribir otro método que llame a esos dos métodos)

Answer 1

El hash de eventos en su vista es solo una especie de "DSL" de conveniencia. Solo vincula tu segundo evento manualmente dentro de initialize .

events: {
''click .search-button'': ''setModelTerm''
},
initialize: function () {
_.bindAll(this);
this.on(''click .search-button'', this.doAnotherThing);
}

Answer 2

Lo único que le impide agregar el mismo par de evento / selector es que los events son un hash: jQuery puede manejar varios enlaces al mismo par de elemento / evento. Sin embargo, una buena noticia es que los eventos jQuery te permiten .myNamespace eventos agregando un sufijo .myNamespace . En la práctica, esto produce los mismos resultados pero puede generar muchas claves diferentes.

var MyView = Backbone.View.extend({
events: {
''click .foo'': ''doSomething'',
''click.a .foo'': ''doSomethingElse'', // you can choose any namespace as they are pretty much transparent.
},
doSomething: function() {
// ...
},
doSomethingElse: function() {
// ...
},
});

Answer 3

Puede pasar una función de envoltorio en su hash de eventos para llamar a sus dos métodos.

De http://backbonejs.org/#View-delegateEvents

Los eventos se escriben en el formato {"event selector": "callback"} . La devolución de llamada puede ser el nombre de un método en la vista o un cuerpo de función directa.

Tratar

events: {
''click .search-button'': ''setModelTerm'',
''change .source-select'': function(e) {
this.setModelSourceId(e);
this.activateSource(e);
}
},