Question

我有一个登录表单的视图，我试图在渲染视图后设置焦点。我试过这个，但它不起作用：

class App.Views.Login extends Backbone.View
  template: template("login")

  events:
    "click button": "login"

  render: ->
     @$el.html @template(@)
     @$el.find("#email").focus()

也尝试了这个;

class App.Views.Login extends Backbone.View
  template: template("login")

  events:
    "click button": "login"

  render: ->
     @$el.html(@template(@)).ready =>
       @$el.find("#email").focus()

添加路由器以显示如何将Login附加到DOM：

class App.Routers.App extends Backbone.Router
  initialize: ->
    chrome = new Spokely.Views.Chrome el: $("#app")
    chrome.render()
    @mainEl = $("#main")

  routes:
    "": "index"
    "ad/:id": "show"
    "about": "about"
    "login": "login"
    "signup": "signup"

  login: ->
    view = new Spokely.Views.Login()
    @mainEl.html view.render().el

我缺少什么？

Answer 1

虽然您在视图中设置了焦点，但是当您将登录视图附加到主DOM时，焦点会重置（它不再聚焦）。尝试：

login: ->
    view = new Spokely.Views.Login()
    @mainEl.html view.render().el    
    $("#email").focus()

在将Login视图附加到主DOM后，使用Jquery调用焦点方法。这肯定会有用。

或者，您可以将'#main'作为el传递给Login视图本身。像：

login: ->
        view = new Spokely.Views.Login el: $("#main")
        view.render()

然后你不需要向路由器添加代码，你的初始代码应该可以工作。

Answer 2

帖子很老了，但我仍然想在这里回答，因为它可能对某人有所帮助。有一些更好更容易的方法。我们可以使用onDomRefresh事件来设置焦点。每次渲染，显示，然后重新渲染视图时，都会调用onDomRefresh事件。我们可以使用它如下：

onDomRefresh:function(){
  @$el.find("#email").focus()
}

希望这有助于某人。

在Backbone View渲染后设置Focus on input

2 个答案: