如何將骨幹表單鏈接到事件？

Question

我正在嘗試使用骨幹表單庫實現帶骨幹的簡單登錄表單。

$(function() { 
    var LoginUser = Backbone.Model.extend({ 
    schema: { 
     username: { type: 'Text' }, 
     password: { type: 'Text' } 
    }, 
    url: 'login_backbone_form' 
    }); 

    var thisLogin = new LoginUser(); 

    var form = new Backbone.Form({ 
    model: thisLogin, 
    events: { 
     "click button#formButton" : "saveForm" 
    }, 

    saveForm: function() { 
     alert('hit saveForm'); 
     this.model.save(); 
    } 
    }).render(); 

    window.form = form; 
    $('#formHook').html(form.el); 
    $('<button type="button" name="login" id="formButton">Login</button>') 
    .appendTo('#formHook'); 
}); 

我的HTML有一個ID爲'formHook'的div，頁面顯示帶有登錄按鈕的窗體。但按下按鈕什麼也不做。

我在這裏做錯了什麼？

Answer 1

第一個問題可能是您的表單按鈕超出了表單視圖的上下文範圍。將DOM事件處理程序附加到視圖時，它們只會響應該視圖中的元素。嘗試在主視圖中嵌入表單和按鈕。

下面的代碼，它也是在這裏的jsfiddle： http://jsfiddle.net/evilcelery/hsSru/

$(function() { 
    var LoginUser = Backbone.Model.extend({ 
     schema: { 
      username: { 
       type: 'Text' 
      }, 
      password: { 
       type: 'Text' 
      } 
     }, 
     url: 'login_backbone_form' 
    }); 

    var LoginView = Backbone.View.extend({ 
     events: { 
      "click button#formButton": "saveForm" 
     }, 

     initialize: function() { 
     this.model = new LoginUser(); 
     }, 

     render: function() { 
     var $button = $('<button type="button" name="login" id="formButton">Login</button>'); 

     this.form = new Backbone.Form({ model: this.model }); 

     this.$el.append(this.form.render().el); 
     this.$el.append($button); 

     return this; 
     }, 

     saveForm: function() { 
      this.form.commit(); 
      this.model.save(); 

      alert('hit saveForm'); 
      console.log(this.model.toJSON()); 
     } 
    }); 

    window.loginView = new LoginView; 
    $('#formHook').html(loginView.render().el); 
});