選擇題問卷Ember.js

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

您不能只有一個「selected_answer」是複選框的值。它需要是某種數組來獲得所有的值。

一個示例可能是在實際選項對象本身上具有「selected」屬性。您的模型可能是這樣的（儘管你可以在其他點添加選定）

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斌你一起玩：

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