Backbone.js View can't unbind events properly

I have some Backbone.js code that bind a click event to a button, and I want to unbind it after clicked, the code sample as below:

var AppView = Backbone.View.extend({
    el:$("#app-view"),
    initialize:function(){
        _.bindAll(this,"cancel");
    },

    events:{
        "click .button":"cancel"
    },

    cancel:function(){
        console.log("do something...");
        this.$(".button").unbind("click");
    }
});
var view = new AppView();

However the unbind is not working, I tried several different way and end up binding event in initialize function with jQuery but not in Backbone.events model.

Anyone know why the unbind is not working?