Блог

Главная - Вопросы по программированию - EmberJS вводит событие onkeypress, не отправленное компоненту

EmberJS вводит событие onkeypress, не отправленное компоненту

#javascript #ember.js

#javascript #ember.js

Вопрос:

Я использую EmberJS и хочу, чтобы, когда пользователь вводит ключ в моей строке поиска, моему компоненту отправлялось действие. Я прочитал (http://emberjs.com/api/classes/Ember .TextSupport.html#property_onEvent), что я должен ввести onEvent=»Нажатие клавиши» в свой ввод, но это не работает. В настоящее время, если я набираю некоторый текст, search() метод не вызывается, но это происходит, если я нажимаю enter.

Вот мой шаблон:

 <div id="command-manager">
    {{input type="search" action="search" onEvent="keyPress" placeholder="Enter a command here" maxlength="32"}}
</div>

Вот мой компонент:

 var CommandManagerComponent = Ember.Component.extend({

  actions:{
    search:function() {

      console.log('search');

    }
  }
});

Как вы можете видеть, это довольно просто, я не знаю, что я делаю не так.

Комментарии:

1. Используете ли вы ember-cli?

Ответ №1:

http://emberjs.com/guides/components/sending-actions-from-components-to-your-application/

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

В противном случае используйте представление для переходов / эффектов пользовательского интерфейса.

Теперь, чтобы использовать действия с вашим компонентом, вам нужно использовать sendAction() .

Пример: http://emberjs.jsbin.com/wofom/1/edit

Ответ №2:

У меня была точно такая же проблема. Проблема с компонентом и представлением может быть сложной.

Я обнаружил, что расширение помощника было самым быстрым методом. Попробуй это:

 var CommandManager = Ember.TextField.extend({
    keyUp: function ( event ) {
        // targetObject is the active view controller
        // this function will look for the search action
        // on your controller
        this.get('targetObject').send('search');
    }
});
Ember.Handlebars.helper('command-manager', CommandManager);

Вы можете вызвать это в своем шаблоне следующим образом:

 <div id="command-manager">
    {{command-manager placeholder="Enter a command here" maxlength="32"}}
</div>

Примечания

  1. Это приведет к вводу стандартного текстового ввода, а не поискового ввода, это нормально?
  2. Я предполагаю, что вы используете контроллер, если это не так, то удалите this.get('targetObject').send('search'); деталь и запустите свой код в keyUp функции.

Я надеюсь, что это поможет. Удачи!

Метки: