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方法中绑定一个新的事件处理程序，并且您的实际功能在该事件处理程序中。

因此，第一次单击按钮时，通过骨干view哈希委托给event的事件处理程序将触发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方法中初始化模型，并将其作为其属性进行缓存，而不是在每次点击时初始化新模型。

主干点击事件未在首次点击时触发

1 个答案: