Question

我有一个骨干视图，如下所示：

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

我想让myFunction只工作一次，然后停止被叫。我相信我可以使用主干once（）方法来实现这一点，但无法弄明白。这是最好的方式，我该如何构建它？谢谢！

Answer 1

只需替换您当前的定义：

myFunction: function(){....}

通过

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

可以多次调用myFunction，但在第一次调用后它将是一个noop。

Answer 2

使用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的内容，因此不会再次调用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
    }
});

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

4 个答案: