Come concentrarsi dopo l'inizializzazione con Emberjs?

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

  •  13-11-2019
  •  | 
  •  

Domanda

Sono nuovo a Ember.js. Voglio concentrarmi su TextField (in campione, id = "testo") dopo l'inizializzazione, ma nella funzione pronta, non funziona il metodo di messa a fuoco ...

<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>
È stato utile?

Soluzione

Il seguente codice funziona:

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

Altri suggerimenti

Sottoclasse TextField e poi diffondere un'usanza View Intorno ai tuoi modelli mi sono sembrati un po 'disordinati, quindi ho scritto questo piccolo pacchetto da 1KB che ti consente di farlo in modo più elegante, direttamente nel modello, senza ulteriori codifica: 

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

Puoi ottenerlo da https://github.com/andreaspizsa/ember-autofocuso con bower install ember-autofocus. Apprezzo il feedback!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top