How to create a component that generates radio buttons in Ember.js?

Question

Can I pass arrays to components in ember?

For example, if I wanted to create a template that displays a pair of radio books with labels:

<label for="media">Media</label><input type="radio" name="entry.1602323871" value="media" id="media" /> <label for="guest">Guest</label><input type="radio" name="entry.1602323871" value="guest" id="guest" /> 

Can I somehow pass an array with this content and pass it through.

 Media, media Guest, guest 

Answer 1

Yes, you can pass something to the components. Just try the radio buttons

 //Basic radio Component App.RadioButton = Ember.Component.extend({ tagName : "input", type : "radio", attributeBindings : [ "name", "type", "value", "checked:checked" ], click : function() { this.set("selection", this.$().val()); }, checked : function() { return this.get("value") === this.get("selection"); }.property('selection') }); Em.Handlebars.helper('radio-button',App.RadioButton); 

Updated (component name must be decrypted)

Work Radio Demo

Answer 2

Now it’s a little easier to get radio buttons in your project (if you use ember-cli) using the ember-radio-buttons addon

Install:

 npm install ember-radio-buttons --save-dev 

Using:

 {{radio-button value='one' checked=selectedNumber}} {{radio-button value='two' checked=selectedNumber}} 

Answer 3

Fast response @ selva-G.

I found that using the ButtonGroup component from Bootstrap-for-Ember is actually cleaner. Here is what I did:

In my view template:

 <script type="text/x-handlebars" data-template-name="myview"> {{bs-btn-group contentBinding="things" selectedBinding="selectedThing"}} </script> 

In this view, the controller (which does not have to be an ArrayController, could rather be a common Ember Controller):

 App.MyviewController = Ember.ArrayController.extend({ things: [ Ember.Object.create({value: 'first', title: 'First Thing'}), Ember.Object.create({value: 'second', title: 'Second Thing'}), Ember.Object.create({value: 'third', title: 'Third Thing'}) ], selectedThing: 'second' selection: function() { console.log(this.get('selectedThing'); }.observes('selectedThing') });