Backbone.js提交事件不發射

我對這裏發生的事情感到不知所措。我認爲這是因爲我在後面的視圖中加載了表單，但我確實不確定。這是我的看法。Backbone.js提交事件不發射

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'serializeForm', 
    'backboneForms', 
    'text!templates/services/ServicesTemplate.html', 
    'models/ServiceModel', 
    'forms/NewServiceForm', 
    'text!templates/forms/ServiceFormTemplate.html', 
    'collections/RegionsCollection', 
    'collections/UsersCollection' 
], function($, _, Backbone, serializeForm, backboneForms, ServicesTemplate, ServiceModel, 
      NewServiceForm, ServiceFormTemplate, RegionsCollection, UsersCollection){ 

    // The form 
    var form; 

    // What's gonna be clicked 
    var clicked; 

    // Get the user's credentials 
    if($.cookie('UserInfo')) 
     var userCreds = JSON.parse($.cookie('UserInfo')); 

    var ServicesView = Backbone.View.extend({ 
     el: '.body', 
     render: function() { 
      // Load everything 
      var servicesTemplate = _.template(ServicesTemplate); 
      this.$el.html(servicesTemplate); 
     }, 
     events: { 
      'click .btn': 'loadForm', 
      'submit': 'addService' 
     }, 
     loadForm: function(ev) { 
      // Save what was clicked 
      clicked = $(ev.target).html(); 

      // Save the scope 
      var that = this; 

      // Create the regions collection 
      var regionsCollection = new RegionsCollection(); 

      var serviceModel = new ServiceModel(); 

      var serviceFormTemplate = _.template(ServiceFormTemplate); 

      // Create the form 
      form = new NewServiceForm({ 
       template: serviceFormTemplate, 
       model: serviceModel 
      }).render(); 

      $("#form").html(form.el); 

      $('.body').on('submit', 'form', function() { 
       alert("submit firing"); 
      }); 
     }, 
     addService: function(ev) { 
      var errors = form.commit(); 

      if(!errors) { 
       var newService = $(ev.currentTarget).serializeForm(); 
       newService.cluster = clicked; 
       console.log(newService); 
      } else { 
       $.each(errors, function(key, value) { 
        $("[name='" + key + "']").closest(".control-group").addClass("error"); 
        $("[name='" + key + "']").closest(".control-group").find(".text-error").html("<small class='control-group error'>" + value.message + "</small>"); 
       }); 
      } 
      return false; 
     } 
    }); 
    return ServicesView; 
});

我試圖事件只是獲取生成表單綁定，正如你可以在上面看到，我已經試過只是交談任何提交事件。任何幫助，這是非常感謝。

編輯：這裏是我的索引頁看起來像

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
     <title>Backbone Auth</title> 
     <?php include('includes/head_includes.php'); ?> 
    </head> 
    <body> 
     <div class="header"></div> 

     <div class="container body"> 
     </div> 
     <?php include('includes/js_files.php'); ?> 
    </body> 
</html>

什麼，這裏大概就是我的形式看起來像。 .control-group都使用骨幹形式擴展填充字段。

<form id="addservice" accept-charset="UTF-8"> 
    <div id="error" class="alert alert-error" style="display:none;"></div> 
    <fieldset> 
     <div class="control-group"> 
      <div class="controls"> 
       <label>Region</label> 
       <div class="text-error"></div> 
       <div data-editors="region"></div> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls"> 
       <label>Stage</label> 
       <div class="text-error"></div> 
       <div data-editors="stage"></div> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls"> 
       <label>Description</label> 
       <div class="text-error"></div> 
       <div data-editors="description"></div> 
      </div> 
     </div> 
     <div class="control-group"> 
      <div class="controls"> 
       <label>Primary Contact</label> 
       <div class="text-error"></div> 
       <div data-editors="contact"></div> 
      </div> 
     </div> 

     <input id="AddService" class="btn btn-primary" type="submit" name="submit" value="Add Service" /> 
    </fieldset> 
</form>

EDIT2：這是我NewServiceForm

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'backboneForms' 
], function($, _, Backbone, backboneForms){ 
    var NewServiceForm = Backbone.Form.extend({ 
     schema: { 
      region: { 
       type: 'Select', 
       title: 'Disaster Region', 
       options: [], 
       validators: [ 
        'required' 
       ] 
      }, 
      stage: { 
       type: 'Select', 
       title: 'Stage', 
       options: [ 
        {val: "", label: "Select One"}, 
        {val: "Assessment", label: "Assessment"}, 
        {val: "Planned", label: "Planned"}, 
        {val: "Commenced", label: "Commenced"} 
       ], 
       validators: [ 
        'required' 
       ] 
      }, 
      description: { 
       type: 'TextArea', 
       title: 'Description', 
       editorAttrs: { 
        maxlength: 140 
       }, 
       validators: [ 
        'required' 
       ] 
      }, 
      contact: { 
       type: 'Select', 
       title: 'Primary Contact', 
       options: [], 
       validators: [ 
        'required' 
       ] 
      } 
     } 
    }); 

    return NewServiceForm; 
});

來源

2013-05-22 Willem Ellis

當您提交該表單時，您是否看到一個提交事件在您的網頁上完全觸發？嘗試使用jQuery在你的#form的父級上註冊一個處理程序，如下所示：http://stackoverflow.com/a/9331127/323005 – damienc88

@ damienc88所以我添加了'$（'body'）。on（'提交'，'#form'，function（）{ alert（「submit firing」）; }）;'在$（「＃form」）。html（form.el）下面''並且它沒有註冊提交事件。 –

@ muistooshort我已經添加了我的索引頁面和表單模板，以便您瞭解它的外觀。 –

WOOP！終於明白了這一點！我繼續前進，將表單的渲染移動到視圖的渲染函數中。所以現在渲染看起來是這樣的：

 render: function() { 

      var serviceModel = new ServiceModel(); 

      var serviceFormTemplate = _.template(ServiceFormTemplate); 

      // Create the form 
      form = new NewServiceForm({ 
       template: serviceFormTemplate, 
       model: serviceModel 
      }).render(); 

      // Load everything 
      var servicesTemplate = _.template(ServicesTemplate); 
      this.$el.html(servicesTemplate); 
     }

其他一切保持不變。現在它的工作！

來源

2013-05-22 18:31:20

Backbone.js提交事件不發射

回答

相關問題