Question

你好SO社区，

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

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

我遇到的问题是我无法将所选数组元素的值（由复选复选框表示）传递给Questions1Controller以创建新的答案记录。我能够在Questions1Controller中访问我的问题记录的其他属性，而不是计算属性。我在下面列出了我的Questions1Controller以及相关模板：

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

});

问题/ 1模板：

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

非常感谢任何帮助。

Answer 1

你不能只有一个＆＃34; selected_answer＆＃34;是复选框的值。它需要是某种数组才能获得所有的值。

一个例子可能是选择了＆＃39;实际选项对象本身的属性。您的模型可能如下所示（尽管您可以在其他点添加所选项）

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>

如果有帮助，请告诉我。

JS bin让你玩：

http://emberjs.jsbin.com/masepexa/4/edit

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

1 个答案: