백본 뷰 렌더링 후 입력 포커스 설정

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() 

추가 라우터는 로그인이 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에 로그인 뷰를 첨부하면 포커스가 재설정되어 더 이상 포커스가 맞지 않는 것처럼 보입니다. 시도 : 메인 DOM에 Login보기를 부착 한 후

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

사용 JQuery와 초점 메소드를 호출 할 수 있습니다. 이것은 확실히 작동합니다.

또는 '#main'을 el로 로그인보기 자체에 전달할 수 있습니다. Like :

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

그런 다음 라우터에 코드를 추가 할 필요가 없으므로 초기 코드가 작동해야합니다.

Answer 2

게시물은 매우 오래된 것이지만 여전히 도움이 될 수 있으므로 여기에 답변하고 싶습니다. 약간 더 쉽고 편한 접근법이 있습니다. 우리는 onDomRefresh 이벤트를 사용하여 포커스를 설정할 수 있습니다. onDomRefresh 이벤트는 뷰가 렌더링, 표시 및 다시 렌더링 될 때마다 호출됩니다. 다음과 같이 사용할 수 있습니다 :

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

희망이 있으면 도움이 될 것입니다.