Как показать элемент, когда другой элемент ориентирован в Ember/Рули

Question

У меня есть что-то вроде этого в шаблоне Рули:

<input> 
<button>save</button> 

Было бы очень просто, чтобы достичь желаемого эффекта в JQuery, и в Угловая директива ng-show, вероятно, выполнит эту работу.

Каким будет режим Ember, показывающий кнопку, когда вход имеет фокус?

В настоящий момент я играю с # без необходимости, исходя из предположения, что вычисленное свойство будет делать трюк, подобно вычислениям в Knockout.

App.DashboardView = App.BaseView.extend({ 
    notesFocused: function() { 
     this.$('#notes').is(':focus'); 
    } 
}); 

и:

{{#unless notesFocused}} 
    <button>save</button> 
{{/unless}} 

Это еще не работает, но я подозреваю, что я нахожусь на правильном пути. Буду признателен за любые указатели.

Answer 1

Вы можете управлять событиями focusIn и focusOut контроллером или маршрутом, используя focus-in и focus-out от Ember.TextField. И сохранить состояние в переменной:

{{input type="text" focus-in="notesFocusIn" focus-out="notesFocusOut"}}  
{{#unless notesFocused}} 
    <button>save</button> 
{{/unless}} 

контроллер

App.DashboardController = Ember.Controller.extend({ 
    notesFocused: false, 
    actions: { 
     notesFocusIn: function() { 
      this.set('notesFocused', true); 
     }, 
     notesFocusOut: function() { 
      this.set('notesFocused', false); 
     } 
    } 
}); 

Увидеть это в действии http://jsfiddle.net/marciojunior/KN4dk/