如何只調用一次骨干視圖事件？

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