CODEWITHSUNDEEP
ember.jsember-data
Sachin
Sachin

Reputation: 2361

How to use valueBinding for toggle radio buttons?

I have posted my code here. Here i have used radio button to define gender.

        <div class="control-group">
        <label class="control-label">Gender</label>
        <div class="controls">
                <p><div id="gendertype" name="gender" class="btn-group rdgender" data-toggle="buttons-radio">                    
                <button type="button" class="btn btn-info">Male</button>
                <button type="button" class="btn btn-info">Female</button>
              </div></p>
        </div>
    </div>

I want to implement binding in such way that it should support existing implementation of CRUD functionality.

But i am not able to implement binding for radio button in this scenario(refer provided fiddle). Can anyone tell me how to implement binding for toggle radio buttons in this scenario?

Upvotes: 1

Views: 880

Answers (1)

wedens
wedens

Reputation: 1830

you can create view for you radio buttons and use class binding to toggle active class on specific button depending on gender property

UPD: also you can just bind class on some boolean property:

<button type="button" {{bindAttr class=":btn :btn-info controller.currentContact.male:active"}}>Male</button>
<button type="button" {{bindAttr class=":btn :btn-info controller.currentContact.male::active"}}>Female</button>


App.Person = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    gender: DS.attr('string'),
    contacttype: DS.attr('number'),
    male: function(){
        return this.get('gender') == 'Male';
    }.property('gender')
});

Upvotes: 1

Related Questions