Компонент Ember с текстовым полем

У меня есть компонент ember, который обертывает текстовое поле. Когда пользователь набирает, я хочу запустить действие поиска.Компонент Ember с текстовым полем

#search-box.js.coffee 
App.SearchBoxComponent = Ember.Component.extend 
    classNames: ['form-group', 'has-feedback'] 
    term: "" 
    placeholder: "Search" 

    actions: 
    search: -> 
     console.log "Searching..." 

# search-box.emblem 
= input type="text" value=term class="form-control" placeholder=placeholder keyUp="search"

Это поддерживает связывание между значением и сроком, но событие KeyUp идет к входному компоненту Тлеющего и не пузырек с компонентом поиска ящика. Если я опустил = и вместо этого использовал стандартный ввод HTML, я получаю действие, отправленное в нужную компоненту, но перерыв привязки и я теряю свой поисковый запрос.

Каков правильный способ использования ввода с действием внутри компонента?

EDIT: Другой подход

Попытки сделать это с JQuery, с добавленной трудностью поиска после определенного периода бездействия (второй, в данном случае):

App.SearchBoxComponent = Ember.Component.extend 
    classNames: ['form-group', 'has-feedback'] 
    delay: 1000 
    didInsertElement: -> 
    $input = @$('input') 
    $input.on 'keyup', => 
     clearTimeout(timer) 
     if $input.val 
     console.log this 
     timer = setTimeout(@_performSearch, @get('delay') 
    _performSearch: -> 
    console.log this 
    console.log "Searching for #{@get('q')}"

Когда _performSearch называется, this теперь window и потерял контекст класса Ember. Я также попытался сделать все жирные стрелки, чтобы абсолютно убедиться, что никакая функция не меняет контекст this, но безрезультатно. Он будет работать, если я сделаю анонимную функцию внутри вызова setTimeout, но не если я вызову метод на объект ember.

источник

2014-10-14 DVG

Удачи с помощью ember's keyUp, у меня никогда не было этого, чтобы работать ... но, возможно, если вы создадите компонент, который расширяет фактическое представление текстового поля. вы можете использовать фактическое событие javascript keyup, чтобы вызвать какое-то поведение? – Grapho

Вы можете создать событие мыши JQuery в didInsertElement крюке компонента:

App.SearchBoxComponent = Ember.Component.extend 
    classNames: ['form-group', 'has-feedback'] 
    term: "" 
    placeholder: "Search" 

    didInsertElement: -> 
    @$('input').keyup => 
     console.log 'Searching...'

Что касается вашего второго подхода, вы можете указать контекст функции с помощью Ember.run.later. Примечание: вам также не удалось закрыть круглые скобки после вашего звонка до setTimeout.

Заменить

timer = setTimeout(@_performSearch, @get('delay'))

Ember.run.later(@,@_performSearch, @get('delay'))

источник

2014-10-14 21:53:02 chopper

У меня было что-то вроде этого в более ранней итерации этого кода, но он отказался от него, потому что каким-то образом я терял контекст класса ember в последующем вызове метода, и я надеялся на не-jquery-решение. Я дам это еще раз. – DVG

У меня есть другой подход, который имеет некоторые проблемы, которые я добавил выше. Есть предположения? – DVG

Я реализовал те же поисковые механики, наблюдая значение search_term (term в коде). Я думаю, вы могли бы попытаться это сделать. Вам нужно установить наблюдателя в App.SearchBoxComponent, стрельба search действие оттуда, если !Em.Empty(this.get('term').

источник

2014-10-14 22:26:59 Microfed

Компонент Ember с текстовым полем

ответ

Смежные вопросы