Question

I’d like to throw up a T+C dialog when one clicks the submit button of a form. I’m using backbone.js. I can’t work out whether I should be cramming the dialog within the FormView, or invoking the DialogView from within FormView or hooking it up with an event or something.

Ideally, my FormView Save() method would initialize it, with a Accept and Decline callback. My previous, none-Backbone implementation handed over all control to the dialog itself, which was a bit inelegant. Can anyone suggest anything?

edit: Thanks to Derick, here’s where I’m at. Note however, that JqueryUI dialog appends itself at the end of ‘body’, and thus looses its context (it’s not longer wrapped in the div it came from), so event binding isn’t working.

save: ->
    that = @
    dlg = new TermsConditionsView({el: '#tcDialog'})
    dlg.bind 'accepted', @tncAccepted, @
    dlg.bind 'declined', @tncDeclined, @
    $(dlg.render().el).dialog
        draggable: false
        resizable: false
        width: 500
        height: 600
        modal: true
        dialogClass: 'termsConditions'
        buttons: [
            {
                id: 'acceptButton'
                text: 'Accept'
                click: -> that.tncAccepted()
            }
            {
                id: 'declineButton'
                text: 'Decline'
                click: -> that.tncDeclined()
            }
        ]

Answer 1

I’d have the FormView call a separate DialogView, and listen to an “accepted” and “declined” event, which the DialogView will trigger based on the user’s action.

FormView = Backbone.View.extend({
  events: {
    "click #save": "save"
  },

  save: function(){
    var dlg = new TnCView();
    dlg.bind("accepted", this.tncAccepted, this);
    dlg.bind("declined", this.tncDeclined, this);
    $(dlg.render().el).dialog();
  },

  tncAccepted: function(){
    // do whatever you need, when the user accepts the terms n conditions
  },

  tncDeclined: function(){
    // do whatever you need, when the user declines the terms n conditions
  }
});

TnCView = Backbone.View.extend({
  events: {
    "click #accept": "accept",
    "click #decline": "decline"
  },

  accept: function(){
    // close the dialog
    this.trigger("accepted");
  },

  decline: function(){
    // close the dialog
    this.trigger("declined");
  }
});

Note that I put the FormView in control of turning the Terms n Conditions into a dialog. it’s my preference for the parent form to be in control of when / where a child form’s ‘el’ is placed into the DOM / shown on the screen. this tends to keep the code cleaner and more flexible in the long run.