Запустить действие в событии изменения с помощью вкладки ввода флажка Ember.js?

Как я могу запустить именованное действие при изменении флажка в Ember.js? Любая помощь будет принята с благодарностью.

Вот что у меня есть. Отметка или снятие флажка не влияет.

Шаблон:

{{input type="checkbox" on="change" action="applyFilter"}}

Контроллер:

actions: {
    applyFilter: function() {
        console.log("applyFilter");
    }
}

Ответ 1

использование наблюдателя кажется самым простым способом просмотра изменения флажка

Шаблон

{{input type='checkbox' checked=foo}}

Код

  foo:undefined,
  watchFoo: function(){
    console.log('foo changed');
  }.observes('foo')

Пример

http://emberjs.jsbin.com/kiyevomo/1/edit

Или вы можете создать свою собственную реализацию флажка, который отправляет действие

Пользовательский флажок

App.CoolCheck = Ember.Checkbox.extend({
  hookup: function(){
    var action = this.get('action');
    if(action){
      this.on('change', this, this.sendHookup);
    }
  }.on('init'),
  sendHookup: function(ev){
    var action = this.get('action'),
        controller = this.get('controller');
     controller.send(action,  this.$().prop('checked'));
  },
  cleanup: function(){
    this.off('change', this, this.sendHookup);
  }.on('willDestroyElement')
});

Пользовательский вид

{{view App.CoolCheck action='cow' checked=foo}}

Пример

http://emberjs.jsbin.com/kiyevomo/6/edit

Ответ 2

Я хочу опубликовать обновление. В Ember 1.13.3+ вы можете использовать следующее:

<input type="checkbox" 
       checked={{isChecked}} 
       onclick={{action "foo" value="target.checked"}} />

ссылка на источник

Ответ 3

Post Ember version >= 1.13 см. ответ Кори Джона Ройса.

Это для версий Ember до 1.13

Это ошибка в ember {{input type = checkbox}} helper.

см. https://github.com/emberjs/ember.js/issues/5433

Мне нравится идея иметь stand-in. Решение @Kingpin2k работает, но доступ к представлениям во всем мире устарел, а использование наблюдателей невелик.

В связанной проблеме github ember, rwjblue предлагает версию компонента:

App.BetterCheckboxComponent = Ember.Component.extend({
  attributeBindings: ['type', 'value', 'checked', 'disabled'],
  tagName: 'input',
  type: 'checkbox',
  checked: false,
  disabled: false,

  _updateElementValue: function() {
    this.set('checked', this.$().prop('checked'));
  }.on('didInsertElement'),

  change: function(event){
    this._updateElementValue();
    this.sendAction('action', this.get('value'), this.get('checked'));
  },
});

Пример использования шаблона ('checked' и 'disabled' являются необязательными):

{{better-checkbox name=model.name checked=model.checked  value=model.value disabled=model.disabled}}

Ответ 4

В Ember v1.13 это можно сделать просто путем создания компонента с именем j-check по моему случаю (не требуется содержимое макета):

import Ember from 'ember';

export default Ember.Checkbox.extend({
  change(){
    this._super(...arguments);
    this.get('controller').send(this.get('action'));
  }
});

И тогда вы просто вызываете его из своего шаблона следующим образом:

{{j-check checked=isOnline action="refreshModel" }}