Multiple Choice Questionnaire Using Checkboxes and Computed Properties in Ember.js - ember.js

Question

Hi there SO community,
I'm new to development and have just recently begun learning Ember.js. As part of the Ember-Rails app that I'm building, I need to create a multi-step, multiple choice questionnaire. I've been stuck on a particular issue which I have not been able to find a solution for online.
You see, I have created a computed property, responseOptions, in my Questions1Controller. responseOptions is an array of multiple choice responses to the given question. Each question is a record in a questions table, and each multiple choice response is represented by a column on the questions table. I created the computed property responseOptions in order to display an array of checkboxes.
The problem that I am having is that I cannot pass the value of the selected array element, represented by a checked checkbox, to the Questions1Controller in order to create a new answer record. I am able to access the other properties of my questions records in the Questions1Controller, just not the computed property. I have included my Questions1Controller, along with the relevant template, below:
Questions1Controller:
RailsCharts.Questions1Controller = Ember.ObjectController.extend({
actions: {
createAnswer: function(){
var user_id = 5;
var question_id = this.get('hard_coded_id');
var selected_response = this.get('selected_answer');
var newAnswer = this.store.createRecord('answer', {
userId: user_id,
questionId: question_id,
answer: selected_response
});
newAnswer.save();
}
},
responseOptions: function () {
var option1Val = this.get('option_1');
var option2Val = this.get('option_2');
var option3Val = this.get('option_3');
var option4Val = this.get('option_4');
var option5Val = this.get('option_5');
var arryOfOptions = [option1Val, option2Val, option3Val, option4Val, option5Val];
var arryOfOptionsFiltered = [];
for (var i=0; i<arryOfOptions.length; i++){
arryOfOptions[i] !== null && arryOfOptionsFiltered.push(arryOfOptions[i]);
}
return arryOfOptionsFiltered;
}.property('arryOfOptionsFiltered.#each')
});
Questions/1 Template:
<h1>Question 1</h1>
<div class='form-group'>
<div class='wording'>
{{wording}}
</div>
<hr>
<div class='answer'>
{{#each responseOptions}}
<label class="checkbox inline">
{{input type='checkbox' checked=selected_answer}}{{this}}
</label>
</br>
{{/each}}
</div>
{{outlet}}
</div>
<button class="btn btn-default" {{action "createAnswer"}}>Submit</button>
Any help would be greatly appreciated.

Answer 1

You can't just have one "selected_answer" be the value of the checkbox. It needs to be some kind of array to get all of the values.
An example might be having a 'selected' property on the actual option object itself. Your model might look like this (although you can add selected at other points)
App.Questions1Route = Ember.Route.extend({
model: function(){
return Ember.Object.create({
option_1: Ember.Object.create({value: "x", selected: false}),
option_2: Ember.Object.create({value: "y", selected: false}),
option_3: Ember.Object.create({value: "z", selected: false}),
option_4: Ember.Object.create({value: "a", selected: false}),
option_5: Ember.Object.create({value: "b", selected: false})
});
}
});
Then your template would be:
<div class='answer'>
{{#each responseOptions}}
<label class="checkbox inline">
{{input type='checkbox' checked=this.selected}}{{this.value}}
</label>
</br>
{{/each}}
</div>
Let me know if that helps.
JS bin for you to play with:
http://emberjs.jsbin.com/masepexa/4/edit