0

Tenho um componente radio-button.js um controller radio-options.js e o template radio-options.hbs. Preciso chamar a função optionChanged que é do controller no componente, atualmente da forma que está dá o seguinte erro: Uncaught Error: had the handler action for: optionChanged

COMPONENT

import Ember from 'ember';

var RadioView = Ember.Component.extend({
  tagName: 'input',
  type: 'radio',
  attributeBindings: ['type', 'htmlChecked:checked', 'value', 'name'],

  change: function(){
    this.set('selectedValue', this.get('value'));
    this.sendAction('optionChanged', this.get('value'));
  },

  htmlChecked: function(){
    return this.get('value') === this.get('selectedValue');
  }.property('value', 'selectedValue'),

  setupBindings: function() {
    if (this.binding) {
      this.binding.disconnect(this);
    }
    this.binding = Ember.Binding.from("context." + this.get('checked')).to('selectedValue');
    this.binding.connect(this);
  }.on('init').observes('checked', 'context')

});

export default RadioView;

CONTROLLER

import Ember from 'ember';

var RadioOptionsController = Ember.Controller.extend({
  answer: Ember.computed.alias('parentController.answer'),

  radioName: function(){
    return 'question-' + this.get('parentController.model.id');
  }.property('parentController.model'),

  actions: {
    optionChanged: function(selectedValue) {
      console.log('value: '+selectedValue);
      this.get('answer').set('text', selectedValue);
      this.send('saveAnswer');
    }
  }
});

export default RadioOptionsController;

TEMPLATE

{{#each model as |option|}}
  <li>
    <label>{{radio-button name=radioName checked='answer.text' value=option.text}} {{option.text}}</label>
  </li>
{{/each}}

1 Resposta 1

1

Na sua chamada do component no template, você precisa passar o optionChanged para o component. Como no código abaixo.

Template

{{#each model as |option|}}
  <li>
    <label>{{radio-button name=radioName checked='answer.text' value=option.text optionChanged='optionChanged'}} {{option.text}}</label>
  </li>
{{/each}}

E no component você precisa fazer o seguinte

var RadioView = Ember.Component.extend({
  // Tirei o código para não causar confusão, mas é só adicionar ele.
  actions:{
    checkedValue: function(value) {
      this.sendAction('optionChanged', value);
    }
  }
});

E no seu controller você define algo para lidar com essa action, se no controller.

var RadioOptionsController = Ember.Controller.extend({
   actions: {
     optionChanged: function(value) {
       //trata a chamada e o que precisa aqui com o seu valor. 
     }
   }
});
1
  • Acho que deu certo (apesar de não estar gravando na API). No Template fiz exatamente como disse, no component ficou assim change: function(){ this.set('selectedValue', this.get('value')); this.sendAction('optionChanged', this.get('value')); }, e no controller não mudei nada pois já tinha a função funcionando. Muito obrigado. Commented 30/03/2016 às 13:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .