時刻關注Ember.TextField

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