backbone.js中的术语+条件对话框

时间:2011-08-26 02:46:38

标签: html modal-dialog backbone.js

当我点击表单的提交按钮时,我想抛出一个T + C对话框。我正在使用backbone.js。我无法弄清楚我是应该在FormView中填充对话框,还是从FormView中调用DialogView或者用事件或其他东西挂钩它。

理想情况下,我的FormView Save()方法会使用Accept和Decline回调对其进行初始化。我以前的无骨干实现将所有控制权移交给对话框本身,这有点不够优雅。任何人都可以提出任何建议吗?

编辑:感谢Derick,这就是我所处的位置。但请注意,JqueryUI对话框会将自身附加到“body”的末尾,从而丢失其上下文(它不再包含在它来自的div中),因此事件绑定不起作用。

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()
            }
        ]

1 个答案:

答案 0 :(得分:3)

我将FormView调用一个单独的DialogView,并听取“已接受”和“已拒绝”事件,DialogView将根据用户的操作触发该事件。

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

请注意,我将FormView控制为将条款n条件转换为对话框。我希望父表单能够控制子表单的'el'何时/何地放入屏幕上显示的DOM /中。从长远来看,这往往会使代码更清晰,更灵活。