title: Backbone and user confirmation - jquery defer and promises
body: <p>I am working with jQuery defer and promises for the first time, and I am running into a little bit of confusion that I am hoping someone clear up for me, in a view I have a checkbox, that determines the value of a model attribute. I am wanting to throw a confirmation as the user checks this input, and based on either a positive or a negative response go from there.</p>
  
  <p>So far I have this in my models view,</p>
  
  <pre><code>App.Views.UserInitialsWithAdmin = Backbone.View.extend({
  
  className : 'avatar-member',
  
  template: _.template( $('#tpl-person-initials-with-admin').html() ),
  
  events: {
      "change input[type=checkbox]" : "changeAdmin"
  },
  
  initialize: function() {
      this.model.on('change:is_admin', this.doAdmin, this );
  },
  
  changeAdmin: function(e) {
      var element = $(e.currentTarget);
      if(element.is(':checked')) {
          this.model.set('is_admin', true);
      } else {
          this.model.set('is_admin', false);
      }
  },
  
  doAdmin: function() {
  
      var self = this;
      var notify = new Pops.Views.ConfirmationView({
          message : "Are you sure?"
      });
      $.when(notify.render().promise)
          .then(function() {
             console.log("the user wants to change the admin");
          }).fail(function() {
              console.log("the user does not want to change the admin");
          });
  
  }
  </code></pre>
  
  <p>});</p>
  
  <p>So at the moment, I am just wanting to log what the user is wanting to do, here is my confirmation view, </p>
  
  <pre><code>'use strict'
  </code></pre>
  
  <p>App.Views.ConfirmationView = Backbone.View.extend({</p>
  
  <pre><code>tagName: 'div',
  className: 'notification',
  
  template: _.template( $('#tpl-cofirmation').html() ),
  
  initialize: function(options) {
      this.options = options;
      console.log(this);
  },
  
  events: {
      "click .js-cancel" : "cancel",
      "click .js-confirm": "confirm"
  },
  
  render: function() {
      //var self = this;
      console.log(this);
      this.$el.html(this.template({
          message: this.options.message
      })).css({'z-index':'9999', 'position':'absolute', 'padding':'10px', 'background':'#fff'}).prependTo('.app');
  
      this.deferred = $.Deferred();
  
      return this.deferred;
  },
  
  cancel: function() {
      this.$el.hide();
      this.deferred.reject();
  },
  
  confirm: function() {
      this.$el.hide();
      this.deferred.resolve();
  }
  </code></pre>
  
  <p>});</p>
  
  <p>The problem that I am having is regardless of what I click in the confirmation the model view always things that I am giving a positive response and logging "the user wants to change the admin" - I am really new to deferring things so any help would be great!</p>