2012-02-27 12 views
10

मैं Ember.js के लिए नया हूँ। मैं फोकस विधि काम नहीं करता है TextField (नमूने में, आईडी = "पाठ") प्रारंभ के बाद, पर लेकिन तैयार समारोह में ध्यान केंद्रित करना चाहते, ...एम्बरजेस के साथ प्रारंभ करने के बाद कैसे ध्यान केंद्रित करें?

<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

भी http://stackoverflow.com/questions/12557584/how-to-use-autofocus-with-ember-js-templates/12560551#12560551 देखें एचटीएमएल 5 के साथ समाधान के बारे में। – 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

वहाँ [नई '{{इनपुट type =" text "}}' एंबर Handlebars सहायक] (http://emberjs.com/api/classes/Ember.Handlebars.helpers.html# के साथ ऐसा करना एक सुंदर तरीका है method_input)? – Abdull

+0

मैं ऐसा नहीं सोचता, के रूप में देखने के दृश्य के पीछे आप के लिए बनाया जाता है। आप JQuery का उपयोग कर डीओएम तत्व का उपयोग कर सकते हैं, लेकिन यह सुरुचिपूर्ण से बहुत दूर है ... –

1

TextField उपवर्गीकरण और फिर एक कस्टम View प्रसार के चारों ओर अपने टेम्पलेट्स थोड़ा मेरे लिए गंदा लग रहा था, इसलिए मैं इस छोटे से 1KB पैकेज आप और अधिक सुंदर ढंग से ऐसा करते हैं, टेम्पलेट में सीधे देता है कि लिखा है, किसी भी आगे की कोडिंग के बिना:

<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 से प्राप्त कर सकते हैं। मैं प्रतिक्रिया की सराहना करता हूं!

संबंधित मुद्दे