在Ember.js中使用复选框和计算属性的多项选择问卷

大家好，这里是社区

我是开发新手，最近刚开始学习Ember.js。作为我正在构建的Ember Rails应用程序的一部分，我需要创建一个多步骤的多选问卷。我一直被困在一个特定的问题上，我无法在网上找到解决方案

你看，我在Questions1Controller中创建了一个计算属性responseOptions。responseOptions是对给定问题的多项选择回答的数组。每个问题都是问题表中的一条记录，每个选择题回答都由问题表中的一列表示。我创建了computed property responseOptions以显示一组复选框

我遇到的问题是，我无法将选中数组元素的值（由复选框表示）传递给Questions1Controller以创建新的答案记录。我可以访问Questions1Controller中问题记录的其他属性，但不能访问computed属性。我已将我的问题1和相关模板包括在下面：

问题1控制器：

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')

});

RailsCharts.Questions1Controller=Ember.ObjectController.extend({
行动：{
createAnswer:function（）{
var用户id=5；
var question_id=this.get（'hard_code_id'）；
var selected_response=this.get（'selected_response'）；
var newAnswer=this.store.createRecord（'answer'{
userId:user\u id，
问题编号：问题编号，
回答：选择的回答
});
newAnswer.save（）；
}
},
响应选项：函数（）{
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=[]；
对于（var i=0；i您不能只让一个“selected\u answer”作为复选框的值。它需要某种数组来获取所有值

例如，实际选项对象本身可能具有“selected”属性。您的模型可能如下所示（尽管您可以在其他点添加selected）

那么您的模板将是：

<div class='answer'>
    {{#each responseOptions}}
        <label class="checkbox inline">
            {{input type='checkbox' checked=this.selected}}{{this.value}}
        </label>
        </br>
    {{/each}}
</div>


{{{#每个响应选项}
{{input type='checkbox'checked=this.selected}{{{this.value}}


{{/每个}}

如果有帮助，请告诉我

JS-bin供您使用：

这太棒了，安德烈！非常感谢。
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})  
    });
  }
});

<div class='answer'>
    {{#each responseOptions}}
        <label class="checkbox inline">
            {{input type='checkbox' checked=this.selected}}{{this.value}}
        </label>
        </br>
    {{/each}}
</div>