将按钮绑定到Backbone视图事件

时间:2014-03-24 02:16:53

标签: javascript backbone.js

我有一个非常简单的表格

  <div id="formQuickRegister">
      <form>
        <fieldset>
          <input id="inputUserName" type="text" placeholder="Username"><br>
          <input id="inputUserEmail" type="text" placeholder="Email"><br>
          <input id="inputUserPassword" type="password" placeholder="Password"><br>
          <button id="btnRegisterNow">Register Now</button>
        </fieldset>
      </form>
  </div>

我有一个关于Backbone的视图,它会呈现它并附加一个事件

define(['text!templates/index.html', 'account'], function (templateIndex, account){
    var viewIndex = Backbone.View.extend({
        el: $('#content'),

        render: function() {
            this.$el.html(templateIndex);
        },

        events: {
            'submit form': 'register'
        },

        register: function () {
            event.preventDefault();

            userToRegister = new account.userModel;

            userToRegister.set('username', $('#formQuickRegister fieldset input#inputUserName').val() );
            userToRegister.set('email', $('#formQuickRegister fieldset input#inputUserEmail').val() );
            userToRegister.set('password', $('#formQuickRegister fieldset input#inputUserPassword').val() );

            account.quickRegister ( userToRegister);
        }
    });

    return new viewIndex;
});

如果在事件中我查找“提交表单”,我可以捕获事件并处理代码。 我想在活动中做的是能够抓住表单的提交按钮点击,例如:

events: { 'click input#btnRegisterNow': 'register'}

但是这个例子不起作用,我尝试了几个sintaxis没有成功。 请你点击sintax来点击#btnRegisterNow按钮吗?

由于

1 个答案:

答案 0 :(得分:1)

你的选择器错了。它应该只是:

events: {
    'click #btnRegisterNow': 'register'
}

在您的模板中,btnRegisterNow是HTML <button>,但您的选择器正在查找ID为<input>的{​​{1}}代码。您可以也使用btnRegisterNow,但由于ID应该在文档中是唯一的,因此将标记名放在选择器中是多余的。