骨干点击事件未在第一次点击时触发

Question

我在点击事件保存模型后尝试切换视图时遇到问题。

我尝试创建的流程是一个重新订购流程，用户将有一个确认页面来重新订购。单击提交后，将执行 api 调用，成功后将加载发票页面。

目前，当我第一次单击提交按钮时没有任何反应，当我再次单击时，我可以获得发票页面。取消按钮没有这样的问题。

var confirmView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
      var template = _.template( $("#confirmReorder_template").html());
      this.$el.html(template);
    },
    events: {
      "click #submitButton": "submitReorder",
      "click #cancelButton": "cancelReorder"
    },
    submitReorder: function(event){
        var URI='<config property="api.url.itemReorder"/>';
        var ItemReorderModel = new itemReorderModel({url:URI});

        $("#submitButton").click(function(event) {
            event.preventDefault();             
            ItemReorderModel.set('id','1');
            ItemReorderModel.save( {}, {
                success : function() {
                    var response = ItemReorderModel.toJSON();
                    var InvoiceView = new invoiceView({el: $("#itemData")});            
                },
                error : function(model, xhr, options) {

                }
            });
        });
    },
    cancelReorder: function(event){
        document.location.href = "items_list.ctl";
    }
  });

第二个视图

var invoiceView = Backbone.View.extend({
    initialize: function(){
        this.render();
    },
    render: function(){
      var template = _.template( $("#reorderInvoice_template").html());
      this.$el.html(template);
    },
    events: {
        "click #returnButton": "itemlist",
        "click #printButton": "print"
    },
    itemlist: function(event){
        document.location.href = "items_list.ctl";
    },
    print: function(event){
    }
  });

加载第一个视图

$(document).ready(function() {
    var ConfirmView = new confirmView({el:$('#itemData')});
});

我是骨干网的新手，所以不确定是否应该使用路由，我也读过一些关于绑定的文章，但仍在努力了解它是如何工作的。

非常感谢任何建议。

Answer 1

您正在submitReorder 方法中绑定一个新的事件处理程序，而您的实际功能在该事件处理程序中。

因此，当您第一次单击按钮时，通过主干event 哈希委派给view 的事件处理程序将触发submitReorder，它将具有实际功能的新事件处理程序直接绑定到按钮元素。

当您下次单击它时，这个新的直接处理程序也会触发并触发您期望的功能。

每次单击按钮时，您都会添加一个新的事件处理程序。

您的代码应该是：

submitReorder: function(event){
    event.preventDefault(); 
    var URI='<config property="api.url.itemReorder"/>';
    //-----^------ if this is hardcoded, why not specify this in the model itself..?
    var ItemReorderModel = new itemReorderModel({url:URI});
    //-------------^----------- why not do this just once while initializing view..?

    ItemReorderModel.set('id','1');
    //-------------^----------- if this is hardcoded, why not set specify it in model..?
    ItemReorderModel.save( {}, {
        success : function() {
            var response = ItemReorderModel.toJSON();
            var InvoiceView = new invoiceView({el: $("#itemData")});            
        },
        error : function(model, xhr, options) {

        }
   });
},

我还建议在视图的 initialize 方法中初始化模型并将其作为属性缓存，而不是在每次点击时都初始化一个新模型。