Question

我正在创建一个Twitter Bootstrap多步模式。

这就是我试图让工作流程发挥作用的方式：

用户点击按钮打开模态...模态打开
用户输入访问代码，点击下一步
服务器检查是否存在访问代码。如果存在，用户将继续进入模态中的下一步，否则用户将收到错误。
用户输入结算信息。用户将支付的价格取决于他们最初输入的访问代码。
模态显示交易的确认消息和访问代码

这是我的模态标记：

  section#paymentModal.modal.fade(tabindex='-1', role='dialog' aria-labelledby='paymentModalLabel' aria-hidden='true')
    div.modal-dialog
      div#paymentModalContent.modal-content
        div.modal-header
          button.close(data-dismiss='modal', aria-label='Close')
            span(aria-hidden="true")&times;
          h4#paymentModalLabel.modal-title Please enter your access code
        div#paymentModalBody.modal-body
        div.modal-footer
          button.btn-previous.btn.btn-warning.hide(type='button', data-orientation='previous') Previous
          button.btn-next.btn.btn-primary(type='button', data-orientation='next') Next Step

以下是我的骨干模板：

  script(type="text/template", id="tmpl-accessCode")
    div.modal-header
      button.close(data-dismiss='modal', aria-label='Close')
        span(aria-hidden="true")&times;
      h4#paymentModalLabel.modal-title Please enter your access code
    div#paymentModalBody.modal-body
      input(type='text', placeholder='Enter Access Code')
    div.modal-footer
      button.btn-next.btn.btn-primary(type='button', data-orientation='next') Next Step

  script(type="text/template", id="tmpl-payment")
    div.modal-header
      button.close(data-dismiss='modal', aria-label='Close')
        span(aria-hidden="true")&times;
      h4#paymentModalLabel.modal-title Please enter your billing information
    div#paymentModalBody.modal-body
      // billing information goes here
    div.modal-footer
      button.btn-previous.btn.btn-warning.hide(type='button', data-orientation='previous') Previous
      button.btn-next.btn.btn-primary(type='button', data-orientation='next') Next Step

这是我的JS：

(function() {
  'use strict';

  app = app || {};

  app.AccessCode = Backbone.Model.extend({
    url: '/accessCode/'
  });

  app.Payment = Backbone.Model.extend({
    url: '/payment/'
  });

  app.AccessCodeView = Backbone.View.extend({
    el: '#paymentModalContent',
    template: _.template( $('#tmpl-accessCode').html() ),
    events: {
      'click .btn-next': 'verifyAccessCode'
    },
    initialize: function() {
      this.model = new app.AccessCode();
      this.listenTo(this.model, 'sync', this.render);
      this.render();
    },
    render: function() {
      this.$el.html(this.template( this.model.attributes ));
    },
    verifyAccessCode: function() {
      var accessCode = this.model.set({'name': 'thomas'});
      accessCode.fetch({
        success: function() {
          // chance view to billing view
        },
        error: function() {
          console.log('Access code doesn\'t exist');
        }
      });
    }
  });

  app.BillingView = Backbone.View.extend({
    el: '#paymentModalContent',
    template: _.template( $('#tmpl-payment').html() ),
    initialize: function() {
      this.model = new app.Payment();
      this.listenTo(this.model, 'sync', this.render);
      this.render();
    },
    render: function() {
      this.$el.html(this.template( this.model.attributes ));
    }  
  });

  $(document).ready(function() {
    app.accessCodeView = new app.AccessCodeView();
  });
}());

我的问题是如何从BillingView中的成功函数回调中调用AccessCodeView？它是否违反主干原则从另一个视图中调用视图？

另外，对我来说，有比这种方法更好的方法吗？

感谢所有帮助和建议：）

Answer 1

更好的方法是分离数据加载和视图创建。这可以通过使用Backbone.Events有效地完成。

创建一个自定义JS对象，例如AppController并让它扩展Backbone.Events。

var AppController = _.extend({},Backbone.Events);

定义自定义事件和将显示加载数据并显示视图的事件处理程序。

AppController.on("app:view_billing",function(payload){
   payload.accessCode.fetch().done(function() {
       // Create an instance of the billing view.
      // Update the url if required using the navigate method with trigger:false
   });
});

现在可以从您的方法执行此操作：

verifyAccessCode: function(e) {
  var accessCode = this.model.set({'name': 'thomas'});
  var payLoad = {accessCode:this.accessCode};
  AppController.trigger("app:view_billing",payLoad);
}

骨干多步模态

1 个答案: