Question

我目前正在忙着编写我的第一个Backbone，RequireJS＆amp; jQuery移动应用程序，但我对事件监听器有一些问题，他们不会解雇。我知道这是一个常见的问题，但我找不到合适的解决方案。

这是我的代码：

index.html正文

<body>
    <div data-role="page" id="loading"></div>
</body>

路由器

define([
  'jquery',
  'backbone',
  'views/projects/ProjectsView',
  'views/projects/AddProjectView'
], function($, Backbone, ProjectsView, AddProjectView) {

  return Backbone.Router.extend({

    initialize: function() {
      $(document).on('click', '[data-rel="back"]', function(event) {
          window.history.back();
          return false;
      });
    },

    routes: {
      'addProject': "addProject",
      '*actions': 'showProjects' // Default
    },

    addProject: function () {
      new AddProjectView().navigate();
    }

    showProjects: function() {
      new ProjectsView().navigate();      
    }

  });
});

AddProjectView（包含事件的问题页面）

define([
  'jquery',
  'underscore',
  'backbone',
  'models/ProjectModel',
  'collections/ProjectsCollection',
  'text!/templates/projects/editProjectTemplate.html'
], function($, _, Backbone, ProjectModel, ProjectsCollection, editProjectTemplate){

  var EditProjectView = Backbone.View.extend({
    el: '#editProject',

    events: {
      "form submit": "addProject"
    },

    addProject: function(e){
      e.preventDefault();

      var form = $(this.el).find('form');

      var project = new ProjectModel({ title: form.find('input[name=title]').val(), description: form.find('input[name=description]').val() });

      var projectsCollection = new ProjectsCollection();
      projectsCollection.fetch();

      projectsCollection.add(project);
      project.save();

      window.location = '#project';

      return false;
    },

    render: function(){  
      this.template = _.template(editProjectTemplate, { type: 'toevoegen', action: 'toevoegen' });

      this.$el.html(this.template);    

      return this;
    },

    navigate: function() {
      var page = this.render();

      $('body').append(page.template);

      $.mobile.changePage( '#editProject' , { changeHash: false } ); 
    }
  });

  return EditProjectView;
});

EditProjectTemplate

<div data-role="page" id="editProject">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <a href="#projects" data-transition="slide" data-direction="reverse" class="ui-btn ui-btn-left ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
        <h1>Project <%= type %></h1>
    </div>  
    <div role="main" class="ui-content">
        <form id="addProjectForm">
            <ul data-role="listview" data-inset="true">
                <li data-role="fieldcontain">
                    <label for="title">Titel</label>
                    <input type="text" name="title" id="title" value="" />  
                </li>
                <li data-role="fieldcontain">                
                    <label for="description">Omschrijving</label>
                    <textarea cols="40" rows="10" name="description" id="description"></textarea>
                </li>
                <li data-role="fieldcontain"> 
                    <input type="submit" value="Project <%= action %>" />
                </li>
            </ul>
        </form>
    </div>
</div>

我试图将el设置为'body'，然后将事件设置得很好，但是当我第二次使用它时，addProject事件被触发两次。当我第三次提交表单时，addProject事件被触发3次。

感谢您的帮助！

Answer 1

只需使用：

el: '#editProject', //Hope this is the id of your form
events: {
  "submit #addProjectForm": "addProject"
},

您可以通过捕获事件来处理双重提交：

submit : function(e) {
    if(e.handled==false){ 
        e.handled = true;
        e.preventDefault();
        console.log("submit");
    }            
}

如果您选择了选择器，Backbone将调用

this.$el.on(event, selector, method);

而不是

this.$el.on(event, method);

jQuery的on方法将indead将选择器仅应用于元素的后代，不包括元素本身。

详细了解活动：http://backbonejs.org/#View-delegateEvents

干杯

Backbone + jQuery移动事件未触发

1 个答案: