2

そのタスク領域ではないマウス クリックの結果として、フォーカスをテキスト領域に設定できるようにしたいと考えています。

最小限の例として、テキストから始めて、それをクリックするとテキストフィールドに置き換えられるとしましょう。これは、ハンドルバー スクリプトで実現できます。

<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);
    }
});

これは、クリック時にテキストフィールドを作成するために機能しますが、そのテキスト領域にフォーカスを与えません (実際にテキストを入力できるようになるには、2 回目のクリックが必要です)。

この目的を達成するための良い方法はありますか? テンプレートに ID を設定し、それを jquery で選択するというハックなこともできますが、それはエレガントではないようです。

4

2 に答える 2

9

さらに、 Ember モジュールに jQuery を混ぜているように見えるdidInsertElementandを減らすために、this.$().focus();私が嫌いなことをするために、Ember.JS の方法を使用して、Ember.TextField.

autofocusHTML5属性に関心があることを指定できます。

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

Ember.TextField次に、拡張する別のビューを作成することなく、標準をページに配置できEmber.TextFieldます。

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

JSFiddle を参照してください: http://jsfiddle.net/MdzhN/

于 2013-02-08T01:07:08.767 に答える
5

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>
于 2013-02-08T00:19:31.657 に答える