如何只调用一次骨干视图事件？

Question

我有一个看起来像这样的骨干视图：

var myView = Backbone.view.extend({
    events: {'click .myClass': 'myFunction'},
    initialze: //initialize function,
    render: //render function,
    myFunction: function (e) {
        //do something
    }
});

我想让myFunction只工作一次，然后停止被调用。 我相信我可以使用骨干一次（）方法来实现这一点，但无法解决。 这是最好的方法，如何组织它？ 谢谢！

Answer 1

只需替换您当前的定义：

myFunction: function(){....}

通过

myFunction: _.once(function(){....})

myFunction可能会被调用多次，但是在第一次调用后将变为noop。

Answer 2

View事件是使用delegateEvents事件绑定的，并且使用jQuery的on的委托形式。 这意味着事件到处理程序的映射是动态的，可以通过操纵DOM进行操纵。 例如，您可以这样做：

Backbone.View.extend({
    events: {
        'click .myClass.onlyOnce': 'doThings'
    },
    doThings: function(e) {
        $(e.currentTarget).removeClass('onlyOnce');
        //...
    },
    //...
});

并确保.myClass元素也具有onlyOnce类。 然后，第一次单击它时，它将匹配.myClass.onlyOnce并且该点击将被路由到doThings ； 然后， doThings继续删除onlyOnce类，并执行需要做的所有事情。 对.myClass后续点击将是对与.myClass.onlyOnce 不匹配的.myClass.onlyOnce点击，因此不会再次调用doThings 。

这种方法具有很好的优势，可以自我记录events行为。

演示： http : //jsfiddle.net/ambiguous/7KJgT/

Answer 3

您可以在第一次为元素添加属性，然后检查元素是否具有该属性：

var myView = Backbone.view.extend({
    events: {'click .myClass': 'myFunction'},
    initialze: //initialize function,
    render: //render function,
    myFunction: function (e) {
        if(e.target.getAttribute("data-fired")) return;
        e.target.setAttribute("data-fired", true);
        // Do your stuff
    }
});

Answer 4

您可以将一个类添加到元素中以验证您的条件。

var myView = Backbone.view.extend({
    events: {
        'click .myClass': 'myFunction'
    },
    initialze: //initialize function,
    render: //render function,
    myFunction: function (e) {
        if (e.target.className.search(/triggered/) !== -1) return; // event already triggered once
        e.target.className += "triggered";
        //do something when its triggered first time
    }
});