Question

在我的Ember.js应用程序中，我有一个像这样的搜索文本字段：

{{view Ember.TextField valueBinding="search" action="doSearch" autofocus="autofocus"}}
<button {{action "doSearch"}} type="button">Hledat</button>

以及如下控制器：

App.BooksController = Ember.ArrayController.extend({

    queryParams: ['keywords'],
    keywords: [],

    search: "",

    actions: {
        doSearch: function() {
            var tokens = this.get('search').split(' ');
            this.set('keywords', tokens);
            this.set('search', '');
        }
    }
});

我需要的是，即使按下按钮或输入按键，此文本字段仍会保持对焦。

实现这一目标的正确方法是什么？我想我需要以某种方式将焦点设置回doSearch方法的输入框。怎么办？

Answer 1

使用Ember.Evented

可以以干净的方式实现控制器和视图层之间的通信

我们走了

您的模板：

{{view Ember.TextField valueBinding="search" class="search-field" action="doSearch" autofocus="autofocus"}}
<button {{action "doSearch"}} type="button">Hledat</button>

您的控制器：

App.BooksController = Ember.ArrayController.extend(Ember.Evented, {

    queryParams: ['keywords'],
    keywords: [],

    search: "",

    actions: {
        doSearch: function() {
            var tokens = this.get('search').split(' ');
            this.set('keywords', tokens);
            this.set('search', '');
            this.trigger('search');
        }
    }
});

您的观点：

App.BooksView = Ember.View.extend({
    didInsertElement: function() {
        this.get('controller').on('search', function() {
            $('.search-field').focus();
        });
        this._super();
    }
});

通过确定视图范围

来访问文本字段可能更好

didInsertElement: function() {
    this.get('controller').on('search', function() {
        this.$().find('.search-field').focus();
    }.bind(this);
    this._super();
}

继续关注Ember.TextField

1 个答案: