backbone.js - 如何自动聚焦第一个主干表单输入字段？

Question

以下屏幕截图显示了登录和注册的组合表单:



以下模块用于渲染 AuthView :

MyApp.module("User", function(User, App, Backbone, Marionette, $, _) {

  User.AuthView = Marionette.ItemView.extend({

    className: "reveal-modal",
    template: "user/auth",

    ui: {
      signInForm: "#signin-form",
      signUpForm: "#signup-form"
    },

    events: {
      "focus input": "onFocus"
    },

    onFocus: function() {
      console.log("Some input field has received focus.");
    },

    onRender: function() {  
      this.signInForm = new Backbone.Form({
        schema: {
          signInEmail: { 
            type: "Text", 
            title: "E-Mail address"
          },
          signInPassword: { 
            type: "Password", 
            title: "Password"
          }
        }
      }).render();
      this.ui.signInForm.prepend(this.signInForm.el);

      this.signUpForm = new Backbone.Form({
        schema: {
          signUpEmail: { 
            type: "Text", 
            title: "E-Mail address"
          },
          signUpPassword: { 
            type: "Password", 
            title: "Password"
          },
          signUpPasswordConfirmation: { 
            type: "Password", 
            title: "Password confirmation"
          }
        }
      }).render();
      this.ui.signUpForm.prepend(this.signUpForm.el);
    }

  });
});

如何在呈现每个子表单时自动聚焦第一个字段？第一个字段是 signInEmail对于 signInForm和 signUpEmail对于 signUpForm .
我试着听 focus input事件。当我单击其中一个输入字段时会触发此类事件，而不是之前。

同时，受当前答案的启发，我想出了以下辅助函数:

focusFirstFormField: function(form) {
  if (_.isUndefined(form)) {
    throw "IllegalStateException: Form is undefined."
  }
  // TODO: AuthView does not focus first sign-in field.
  var firstInput = form.find(':input:first');
  if (_.isObject(firstInput)) {
    if (firstInput.length > 0) {
      firstInput = firstInput[0];
    }
    else {
      throw "IllegalStateException: Form find returns an empty jQuery object."
    }
  }
  _.defer(function() {
    firstInput.focus();
  });
 }

不过，仍然需要改进。

Answer 1

events 对象是 DOM 事件，通常由用户触发，因此在这种情况下您可能不想使用它。

如果我对您的理解正确，您希望将焦点放在每个表单的第一个输入中，但是由于您一次只能关注一件事并且它们一起呈现，您必须选择一个或其他。

最简单的选择是在 onRender 的末尾添加另一行，关注焦点输入。如果您的输入正在生成类似这样的输入:

<input type="text" name="signInEmail">

然后你可以添加:

this.$('[name=signInEmail]').focus();

如果不是，您将不得不更改选择器 this.$(xxxx).focus() 以适应。