Ember: простой способ установить фокус на поле

Я ищу простой способ установить фокус на текстовое поле или текстовое поле. Я предпочитаю не смешивать синтаксис Jquery с синтаксисом Ember... и я предпочитаю не создавать отдельные представления для каждого текстового поля или текстовой области, в которых я когда-либо хочу установить фокус.

Какие-либо предложения?

Мое поле textArea просто:

{{view Ember.TextArea valueBinding="body" placeholder="body"}}

Спасибо Марк

Источник

5 ответов

Решение

Самый простой способ установить фокус на TextArea будет следующим:

App.FocusTextArea = Ember.TextArea.extend({
  didInsertElement: function() {
    this._super(...arguments);
    this.$().focus();
  }
});

И всякий раз, когда вам нужен такой вид, вы можете использовать его так:

{{view App.FocusTextArea valueBinding="body" placeholder="body"}}

и я предпочитаю не создавать отдельные представления для каждого текстового поля или текстовой области, в которых я когда-либо хочу установить фокус.

Создавая пользовательские TextArea вид, который простирается от Ember.TextArea вы не создаете каждый раз новое представление, вы повторно используете пользовательское представление с желаемым поведением.

Надеюсь, поможет.

Источник

С новым Ember CLI вы получаете это просто autofocus="autofocus" в шаблоне *.hbs

{{input value=text type="text" name="text" placeholder="Enter text" autofocus="autofocus"}}
Источник

Этот небольшой пакет идет на шаг дальше и делает это немного более элегантно, прямо в шаблоне, без какого-либо дополнительного кодирования или подклассов:

<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 }} {# <<<<< does the magic #}
  </script>
  <!-- your app -->
  <script>
    Ember.Application.create();
  </script>
</body>

Вы можете получить его по https://github.com/AndreasPizsa/ember-autofocus или с помощью bower install ember-autofocus,

Источник

Вы можете создать component это оборачивает input поле и использовать didInsertElement крючок для фокусировки внутреннего input:

В шаблоне:

// template.hbs
{{#focus-input}}
  {{input type="text"}}
{{/focus-input}}

Ваш компонент:

// components/focus-input.js
import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement () {
    this.$('input').focus();
  }
});
Источник

В моем случае это помогает https://github.com/ember-a11y/ember-component-focus

component.coffee

import FocusableComponent from 'ember-component-focus/mixins/focusable-component'
export default Ember.Component.extend FocusableComponent,
  actions:
    show: () ->
      @set 'AddCardMode', true
      @focusAfterRender "#1"

template.emblem

if AddCardMode
  something input id=1
Источник
Другие вопросы по тегам