Comment se concentrer après l'initialisation avec emberjs ?

StackOverflow https://stackoverflow.com/questions/9468061

  •  13-11-2019
  •  | 
  •  

Question

Je suis nouveau sur Ember.js.Je veux me concentrer sur TextField (dans Exemple, id = "Text") après initialisation, mais dans la fonction Ready, ne fonctionne pas la méthode de mise au point ...

<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>
Était-ce utile?

La solution

Le code suivant fonctionne: 

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

Autres conseils

Sous-classement TextField puis répandre une coutume View autour de vos modèles m'a semblé un peu compliqué, j'ai donc écrit ce petit package de 1 Ko qui vous permet de le faire de manière plus élégante, directement dans le modèle, sans aucun codage supplémentaire : 

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

Vous pouvez l'obtenir de https://github.com/AndreasPizsa/ember-autofocusou avec bower install ember-autofocus.J'apprécie les commentaires!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top