2012-02-27 8 views
10

Ember.js를 처음 사용했습니다. 내가 ... 초점 방법을 작동하지 않습니다, 텍스트 필드 (샘플에서, ID = "텍스트") 초기화 후, 에 있지만, 준비 기능에 초점을 맞추고 자emberjs로 초기화 한 후 초점을 맞추는 방법은 무엇입니까?

<body> 
    <!-- library load --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
    <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script> 
    <script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script> 

    <script type="text/x-handlebars"> 
     {{view Em.TextField id="text"}} // want to focus it. 
    </script> 
    <script type="text/javascript"> 
    var App = Em.Application.create(); 
     App.ready = function() { 
      $('#text').focus(); // does'nt work. 
     } 
    </script> 
</body> 
+0

HTML5와 관련된 솔루션은 http://stackoverflow.com/questions/12557584/how-to-use-autofocus-with-ember-js-templates/12560551#12560551을 참조하십시오. – rit

답변

12

다음 코드는 수행 업무 :

<script type="text/x-handlebars"> 
     {{view App.TextField id="text"}} // want to focus it. 
</script> 
<script type="text/javascript"> 
    var App = Em.Application.create(); 

    App.TextField = Em.TextField.extend({ 
    didInsertElement: function() { 
     this.$().focus(); 
    } 
    }); 
</script> 
+0

이 정상적으로 작동합니다. 고마워! – arumons

+1

[새로운 {{{input type = "text"}}'Ember Handlebars helper] (http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#)를 사용하여이 작업을 수행하는 우아한 방법이 있습니까? method_input)? – Abdull

+0

나는 그 장면 뒤에서 너에게보기가 만들어지기 때문에 그렇게 생각하지 않는다. 당신은 JQuery를 사용하여 DOM 요소에 접근 할 수 있습니다. 그러나 그것은 우아한 것이 아닙니다 ... –

1

TextField 하위 클래스와 템플릿이 나에게 조금 지저분한 듯 주위에 다음 사용자 정의 View 확산, 그래서 더 코딩하지 않고, 직접 템플릿에 더 우아하게이 작업을 수행 할 수 있습니다이 작은 1킬로바이트 패키지를 썼다 :

<body> 
    <!-- all the libraries --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script> 
    <script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script> 
    <!-- your template --> 
    <script type="text/x-handlebars"> 
    Hello, world! {{ input }} 
    : 
    : more elements here 
    : 
    {{ autofocus }} {# <<<<-- Magic happens here #} 
    </script> 
    <!-- your app --> 
    <script> 
    Ember.Application.create(); 
    </script> 
</body> 

https://github.com/AndreasPizsa/ember-autofocus 또는 bower install ember-autofocus에서 가져올 수 있습니다. 나는 의견에 감사한다!

관련 문제