CODEWITHSUNDEEP
ember.jsradio-buttonclickobservers
user1338121
user1338121

Reputation: 805

Ember js observer issue

When clicked the ember radio, observing the clicked radio using below function named bindingChanged. But as soon as radio button is clicked the value is n't getting observed and hence not hitting bindingChanged method. This used to work fine with ember 0.9.8 version. It's not working with latest ember version. Any idea why observer not working as expected?

//valueBinding snippet
App.showSampleController = Ember.Object.create({
    content : App.CreateSampleModel.create()
});

App.CreateSampleModel= Ember.Object.extend({
    id :''
});

//View Template -->
App.sampleView = Em.View.extend({
    click:function(){
        App.showSampleController.set('content',App.CreateSampleModel.create({id:1})); 
    }
});

Handle bar snippet:

{{ view Ember.RadioButton group="default" name="sampleRadio"  option=content.id valueBinding="App.showSampleController.content.id" }}

Below is radio button code

Ember.RadioButton = Ember.View.extend({
    title: null,
    checked: false,
    group: "radio_button",
    disabled: false,
    customId:"open",

    classNames: ['ember-radio-button'],

    defaultTemplate: Ember.Handlebars.compile('<input type="radio" {{ bindAttr disabled="disabled" name="group" value="option" checked="checked" id="customId" }} />{{title}}'),

    bindingChanged: function(){
        if(this.get("option") == get(this, 'value')){
            this.set("checked", true);
            //invoking click when ember radio is accessed/checked/clicked!!
            this.$('input:radio').click();
        }
    }.observes("value"),

    change: function() {
        Ember.run.once(this, this._updateElementValue);
    },

    _updateElementValue: function() {
        var input = this.$('input:radio');
        set(this, 'value', input.attr('value'));
    }
});

Here is a original fiddle and below is another fiddle and you can see the bug in below fiddle. The major difference is it has latest ember and it's completely breaking another fiddle

Upvotes: 1

Views: 2086

Answers (1)

Manoharan
Manoharan

Reputation: 388

Problem with view context in templates. You should have your template like

<label><input type="radio" {{ bindAttr disabled="view.disabled" name="view.group" value="view.option" checked="view.checked"}} />{{view.title}}</label>

Here is working version. Refer here

Upvotes: 1

Related Questions