установить фокус в приложении ember

Я хочу иметь возможность установить фокус на текстовую область в результате щелчка мыши не в этой области задач.

В качестве минимального примера предположим, что я начинаю с текста, и если вы нажмете на него, он заменится текстовым полем. Я могу добиться этого с помощью сценария руля:

<script type="text/x-handlebars">
  {{#if isActive}}
  {{view Ember.TextField}}
  {{else}}
  <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>

с контроллером

App.ApplicationController = Ember.Controller.extend({
    isActive: false,
    foo: function(){
       this.set("isActive", true);
    }
});

Это работает для создания текстового поля по щелчку, но не фокусируется на этой текстовой области (для фактического ввода текста требуется второй щелчок).

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


javascript focus handlebars.js ember.js
person BostonJohn    schedule 07.02.2013    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Рассмотрим расширение Ember.TextField следующим образом:

App.FocusedTextField = Em.TextField.extend({
  didInsertElement: function() {
    this.$().focus();
  }
});

Затем измените шаблон руля, чтобы использовать его вместо него:

<script type="text/x-handlebars">
  {{#if isActive}}
    {{view App.FocusedTextField}}
  {{else}}
    <p {{action foo}}> Click Here to Enter text  </p>
  {{/if}}
</script>
person Mike Grassotti    schedule 08.02.2013

arrow_upward
9
arrow_downward

Кроме того, чтобы уменьшить didInsertElement и this.$().focus();, которые могут показаться смешением jQuery с вашими модулями Ember — а я ненавижу это делать, — вы можете использовать способ Ember.JS для указания дополнительных атрибутов для Ember.TextField.

Мы можем указать, что нас интересует атрибут HTML5 autofocus:

Ember.TextSupport.reopen({
  attributeBindings: ["autofocus"]
});

Затем мы можем разместить стандартный Ember.TextField на нашей странице, не создавая еще одно представление для расширения Ember.TextField:

{{view Ember.TextField autofocus="autofocus"}}

См. JSFiddle: http://jsfiddle.net/MdzhN/

person Wildhoney    schedule 08.02.2013
comment
Хорошее предложение. Примечание для других: это свойство не работает в версиях Internet Explorer ‹ 10. Атрибут автофокуса - person Scott; 01.11.2013