CODEWITHSUNDEEP
twitter-bootstrapember.js
Rigel
Rigel

Reputation: 882

Get bootstrap buttongroup radio work in emberjs

I am trying to implement radio toggle using ember component in bootstrap.

this is how I am getting the list displayed. In bootstrap when a button is clicked "active" class is appended to its label tag.

How can i set default and toggle active classess in label. JSBIN my attempt 

 <script type="text/x-handlebars" data-template-name="index">
   {{radiobutton-list content=radioOptions selected=selectedValue}}
 </script>

  <script type="text/x-handlebars" data-template-name="components/radiobutton-list">
  <div class="btn-group" data-toggle="buttons">
    {{#each content}}
       <label {{bind-attr class = ":btn :btn-primary" }}>
         {{radio-button}}{{label}}
        </label>
  {{/each}}
  </div>

Upvotes: 0

Views: 1029

Answers (1)

leroyse
leroyse

Reputation: 1007

The idea behind the solution (which I battles a long time over) is to do the following:

  1. Create a radio-button component that knows how to select itself and react to selection changes:
  2. Create a selector components that iterates on your list and provides the following:
    • a didInsertElement hook to do the initial selection based on the model selectedVal when it is inserted into the page,
    • a property observer (value) that reacts to value changes in the radio button selector and fires and afterRender event where the active class adaptations will be made. (NB: why we have to do this is explained in the comments of the code...); It also necessarily fires a component selection changed event too so you can hook to it if you wanted !
    • the classNameBindings in the radio-button component is also very important to get the active class set on the input component !

All that is than combined with a CSS rule hiding the input radio button and we are set !

JSBin solution

Upvotes: 1

Related Questions