backbone.js - 在 Backbone 中触发两个或多个事件后执行一个函数

Question

我有两个按钮：

<button id="1">button 1</button>
<br>
<button id="2">button 2</button>

我想仅在单击两个按钮后才显示警报消息，这是我正在使用 Backbone.js 的较大应用程序的一部分，到目前为止我有这个：

var test = {}; 

_.extend(test, Backbone.Events); //in order to use the backbone events feature

test.on("hello bye", function(){
    alert("works!");
});

$("#1").click(function() {
    test.trigger("hello");
});

$("#2").click(function() {
    test.trigger("bye");
}?);

每当单击两个按钮之一时，这都会显示消息，但我需要它仅在单击两个按钮后才能工作。有没有办法使用 Backbone.Events 功能或使用 jQuery 来实现这一点？

小提琴：http: //jsfiddle.net/ccgRN/

谢谢

Answer 1

这是一个使用承诺的想法：http: //jsfiddle.net/LFJGL/1/

编辑：针对旧版浏览器修复：

var test = {};
var promises = [];
_.extend(test, Backbone.Events); //in order to use the backbone events feature

function GetAPromise() {
    var p = $.Deferred();
    promises.push(p);
    return p;
}

var events = "hello bye".split(" ");
_.each(events,function(event) {
    var p = GetAPromise();
    test.on(event, function() {
        p.resolveWith(event);
    });
});

$("#1").click(function() {
    test.trigger("hello");
});

$("#2").click(function() {
    test.trigger("bye");
});


$.when.apply($, promises).done(function() {
    alert('triggered');
    //might be nice to remove the event triggers here.
});​

Answer 2

最简单的实现是创建几个变量来跟踪已触发的事件。

var helloClicked = false;
var byeClicked = false;
var test = {};

_.extend(test, Backbone.Events);

test.on('hello bye'), function() {
  if (helloClicked && byeClicked) {
    alert('works!');
  }
});

$('#1').click(function() {
  helloClicked = true;
  test.trigger('hello');
});

$('#2').click(function() {
  byeClicked = true;
  test.trigger('bye');
});