9

我有一个简单的 ember.js 文本字段，我正在尝试添加自动对焦

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

PersonApp.SearchField = Ember.TextField.extend({

});

我可以在 javascript 中添加它还是像模板本身的属性一样简单？

4

4 回答 4

30

更新：

Ember 的最新版本现在支持此内置功能，因此您不再需要重新打开 TextField 来添加属性绑定。截至 2014 年 1 月（提交fdfe8495），您可以在模板中简单地使用 HTML5 自动对焦属性：

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

这是一个简单的 jsfiddle 演示。

以前的解决方案：

您还可以重新打开 TextField 以允许您绑定 autofocus 属性：

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

有关自动对焦字段的更多信息，另请参阅Mozilla Developer Network 上的文档：

于 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 回答