9

単純なember.jsテキストフィールドがあり、オートフォーカスを追加しようとしています

{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}}

PersonApp.SearchField = Ember.TextField.extend({

});

これをJavaScriptに追加できますか、それともテンプレート自体の属性と同じくらい簡単ですか？

4

4 に答える 4

30

アップデート：

Emberの最近のバージョンでは、これが組み込まれているため、attributeBindingを追加するためにTextFieldを再度開く必要はありません。2014年1月（commit fdfe8495）の時点で、テンプレートでHTML5オートフォーカス属性を使用できます。

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}

これが簡単なjsfiddleのデモンストレーションです。

以前の解決策：

TextFieldを再度開いて、オートフォーカス属性をバインドできるようにすることもできます。

Ember.TextField.reopen({
  attributeBindings: ['autofocus']
});

そして、テンプレートで：

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}
于 2013-11-03T23:42:15.130 に答える
10

TextFieldでHTML5オートフォーカス属性を使用するオプションもあります。

PersonApp.SearchField = Ember.TextField.extend({
    attributeBindings: ['autofocus'],
    autofocus: 'autofocus'
});

オートフォーカスフィールドの詳細については、MozillaDeveloperNetworkのドキュメントも参照してください。

于 2012-09-24T07:26:00.227 に答える
8

オートフォーカスとは、テキストボックスにすぐに焦点を合わせ始めることを意味しますか？あなたはそれを望んdidInsertElementでいます。

didInsertElement: function() {
    this.$().focus();             
}

http://jsfiddle.net/qKXJt/139/

于 2012-09-24T01:29:44.333 に答える
2

このメソッドを小さな1kbパッケージにラップして、これをもう少しエレガントに、さらにコーディングせずにテンプレートに直接解決しました。

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

パッケージはhttps://github.com/AndreasPizsa/ember-autofocus （またはbower install ember-autofocus）にあります。楽しみ！

于 2014-01-04T02:30:11.373 に答える